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

HTML代码：

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

JS代码：

var eleBox = document.getElementById('img');
// 测试按钮
var eleBtnPrependText = document.getElementById('prependText');
var eleBtnPrependHtml = document.getElementById('prependHtml');
var eleBtnPrependElement = document.getElementById('prependElement');
var eleBtnPrependMultiple = document.getElementById('prependMultiple');

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