How to replace innerHTML of a div using jQuery?

2018-12-31 17:31发布

站内文章 / JavaScript
45 0 0

问题:

How could I achieve the following:

document.all.regTitle.innerHTML = \'Hello World\';

Using jQuery where regTitle is my div ID?

回答1:

$(\"#regTitle\").html(\"Hello World\");


回答2:

The html() function can take strings of HTML, and will effectively modify the .innerHTML property.

$(\'#regTitle\').html(\'Hello World\');

However, the text() function will change the (text) value of the specified element, but keep the html structure.

$(\'#regTitle\').text(\'Hello world\');


回答3:

If you instead have a jquery object you want to render instead of the existing content. Then just reset the content and append the new.

var itemtoReplaceContentOf = $(\'#regTitle\');
itemtoReplaceContentOf.html(\'\');
newcontent.appendTo(itemtoReplaceContentOf);

Or:

$(\'#regTitle\').empty().append(newcontent);


回答4:

Here is your answer:

//This is the setter of the innerHTML property in jQuery
$(\'#regTitle\').html(\'Hello World\');

//This is the getter of the innerHTML property in jQuery
var helloWorld = $(\'#regTitle\').html();


回答5:

There are already answers which give how to change Inner HTML of element.

But I would suggest, you should use some animation like Fade Out/ Fade In to change HTML which gives good effect of changed HTML rather instantly changing inner HTML.

Use animation to change Inner HTML

$(\'#regTitle\').fadeOut(500, function() {
    $(this).html(\'Hello World!\').fadeIn(500);
});

If you have many functions which need this, then you can call common function which changes inner Html.

function changeInnerHtml(elementPath, newText){
    $(elementPath).fadeOut(500, function() {
        $(this).html(newText).fadeIn(500);
    });
}


回答6:

Answer:

$(\"#regTitle\").html(\'Hello World\');

Explanation:

$ is equivalent to jQuery. Both represent the same object in the jQuery library. The \"#regTitle\" inside the parenthesis is called the selector which is used by the jQuery library to identify which element(s) of the html DOM (Document Object Model) you want to apply code to. The # before regTitle is telling jQuery that regTitle is the id of an element inside the DOM.

From there, the dot notation is used to call the html function which replaces the inner html with whatever parameter you place in-between the parenthesis, which in this case is \'Hello World\'.



回答7:

you can use either html or text function in jquery to achieve it

$(\"#regTitle\").html(\"hello world\");

OR

$(\"#regTitle\").text(\"hello world\");


回答8:

jQuery\'s .html() can be used for setting and getting the contents of matched non empty elements (innerHTML).

var contents = $(element).html();
$(element).html(\"insert content into element\");


回答9:

<!DOCTYPE html>
<html>
  <head>
    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"></script>
    <script>
      $( document ).ready(function() {
        $(\'.msg\').html(\'hello world\');
      });
    </script>

  </head>
  <body>
    <div class=\"msg\"></div>
  </body>
</html>


回答10:

$(\"#regTitle\")[0].innerHTML = \'Hello World\';


回答11:

Just to add some performance insights.

A few years ago I had a project, where we had issues trying to set a large HTML / Text to various HTML elements.

It appeared, that \"recreating\" the element and injecting it to the DOM was way faster than any of the suggested methods to update the DOM content.

So something like:

var text = \"very big content\";
$(\"#regTitle\").remove();
$(\"<div id=\'regTitle\'>\" + text + \"</div>\").appendTo(\"body\");
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>

Should get you a better performance. I haven\'t recently tried to measure that (browsers should be clever these days), but if you\'re looking for performance it may help.

The downside is that you will have more work to keep the DOM and the references in your scripts pointing to the right object.



标签： javascript jquery html innerhtml
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~