Element.innerHTML is pretty much the way to go.
(Element.innerHTML几乎是要走的路。)
Here are a few ways to use it:(以下是一些使用它的方法：)
HTML(HTML)
<div class="results"></div>
JavaScript(JavaScript的)
// 'Modern' browsers (IE8+, use CSS-style selectors)
document.querySelector('.results').innerHTML = 'Hello World!';
// Using the jQuery library
$('.results').html('Hello World!');
If you just want to update a portion of a <div> I usually just add an empty element with a class like value or one I want to replace the contents of to the main <div> .
(如果你只是想更新<div>的一部分，我通常只需要添加一个类似value的空元素，或者我想将主内容替换为主<div> 。)
eg(例如)
<div class="content">Hello <span class='value'></span></div>
Then I'd use some code like this:
(然后我会使用这样的代码：)
// 'Modern' browsers (IE8+, use CSS-style selectors)
document.querySelector('.content .value').innerHTML = 'World!';
// Using the jQuery library
$(".content .value").html("World!");
Then the HTML/DOM would now contain:
(那么HTML / DOM现在将包含：)
<div class="content">Hello <span class='value'>World!</span></div>
Full example.(完整的例子。) Click run snippet to try it out.(点击运行代码段进行试用。)
// Plain Javascript Example var $jsName = document.querySelector('.name'); var $jsValue = document.querySelector('.jsValue'); $jsName.addEventListener('input', function(event){ $jsValue.innerHTML = $jsName.value; }, false); // JQuery example var $jqName = $('.name'); var $jqValue = $('.jqValue'); $jqName.on('input', function(event){ $jqValue.html($jqName.val()); });
html { font-family: sans-serif; font-size: 16px; } h1 { margin: 1em 0 0.25em 0; } input[type=text] { padding: 0.5em; } .jsValue, .jqValue { color: red; }
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Setting HTML content example</title> </head> <body> <!-- This <input> field is where I'm getting the name from --> <label>Enter your name: <input class="name" type="text" value="World"/></label> <!-- Plain Javascript Example --> <h1>Plain Javascript Example</h1>Hello <span class="jsValue">World</span> <!-- jQuery Example --> <h1>jQuery Example</h1>Hello <span class="jqValue">World</span> </body> </html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
