how do i set html contents in the using jquery

Question

I have:

<body marginwidth="0" marginheight="0" contenteditable="true" 
    class="bootsy required form-control bootsy_text_area wysihtml5-editor" 
    spellcheck="true" 
    style="color: rgb(85, 85, 85); cursor: auto; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px; background-color: rgb(255, 255, 255);">
</body>

I used the following code, but it's not working:

if ($("body").hasClass("wysihtml5-editor")) {
     $("body").html('this is a test content.');
});

I am using bootsy in my rails app, which generates this body tag in my source code in the browser.So, i want to first find out this body tag with class and then set some value to it using jquery. Please help me out.

You can only set the value of an element used for user input. What do you actually want to change? — Barmar, Apr 30 '15 at 23:10
What is `this` in your code? If that code is in an event handler, `this` will be the target of the event, not the body. If you want to set the contents of the body, why don't you write `$("body").html()`? — Barmar, Apr 30 '15 at 23:20

Urasquirrel · Answer 1 · 2015-05-01T00:37:22.817

<div value="" marginwidth="0" id="bodyId"  marginheight="0" contenteditable="true" 
    class="bootsy required form-control bootsy_text_area wysihtml5-editor" 
    spellcheck="true" 
    style="color: rgb(85, 85, 85); cursor: auto; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px; background-color: rgb(255, 255, 255);">zxcv</div>

Here is the Javascript! Also don't forget to include your Jquery Library! https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js

Here is the JS!

    $("body").replaceWith("thing");
    $( "body" ).attr( "value", "Beijing Brush Seller" );

The text-editor i am using is basically a gem, which is auto generated. I have no id for this, that's why i have only class to deal with. — Uday kumar das, Apr 30 '15 at 23:43
That's fine! I've updated the answer for you. Id's are generallly the best way to go because you want to be as specific as possible usually, but just accessing body is fine. — Urasquirrel, May 01 '15 at 00:38

Edmundo Santos · Answer 2 · 2015-04-30T23:56:56.927

0

That's an easier way to do it:

$( document ).ready(function() {
    $('.wysihtml5-editor').append('<span>Your HTML content.</span>');
});

You can insert HTML with append or prepend.

More information:

edited Apr 30 '15 at 23:56

answered Apr 30 '15 at 23:50

Edmundo Santos

566
3
16

@Udaykumardas Maybe you should fire a event and them change the content? See answer: http://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed – Edmundo Santos May 01 '15 at 00:03

how do i set html contents in the using jquery

2 Answers2