本文主要是介绍原生js点击按钮动态创建元素，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div id="box"></div>
<script src="js/common.js"></script>
<script>var btn = my$('btn');var box = my$('box');// 动态创建元素3种方法// 1. document.write() 会将整个文档内容覆盖掉 应用情景：第三方服务软件 如商务通等// btn.onclick = function () {// document.write('hello');// }// 2. innerHTML() 重新绘制 字符串内容多时 效率低// btn.onclick = function () {// box.innerHTML = 'hello <p> world </p>';// }// 3. document.createElement()btn.onclick = function () {// 在内存中创建一个DOM对象var newDiv = document.createElement('div');// 设置对象的属性newDiv.innerHTML = 'hello <p> world </p>';newDiv.style.color = 'red';// 将创建的对象放到DOM上box.appendChild(newDiv);}
</script>
</body>
</html>// common.js// 通过id获取元素
function my$(element) {var el = document.getElementById(element);return el;
}
这篇关于原生js点击按钮动态创建元素的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
