DOM append()节点API方法实例页面

HTML代码：

<div id="box">
    <img src="mm0.jpg">
</div>
<p><button id="appendText">插入文字“美女”</button></p>
<p><button id="appendHtml">插入“&lt;strong&gt;美女&lt;/strong&gt;”</button></p>
<p><button id="appendElement">插入“美女”标题</button></p>
<p><button id="appendMultiple">一次性插入多段内容</button></p>
                

JS代码：

var eleBox = document.getElementById('img');
// 测试按钮
var eleBtnAppendText = document.getElementById('appendText');
var eleBtnAppendHtml = document.getElementById('appendHtml');
var eleBtnAppendElement = document.getElementById('appendElement');
var eleBtnAppendMultiple = document.getElementById('appendMultiple');

// 点击按钮
// 纯文本测试
eleBtnAppendText.addEventListener('click', function () {
    eleBox.append('美女');    
});
// html字符串测试
eleBtnAppendHtml.addEventListener('click', function () {
    eleBox.append('<strong>美女</strong>');    
});
// DOM节点测试
eleBtnAppendElement.addEventListener('click', function () {
    var eleTitle = document.createElement('h4');
    eleTitle.innerHTML = '美女';
    eleBox.append(eleTitle);    
});
// 多参数测试
eleBtnAppendMultiple.addEventListener('click', function () {
    eleBox.append('1. 美女', ' ', '2. 美女');    
});