js和jquery对dom节点的操作(创建/追加)

2019-12-24,,,,

复制代码 代码如下:
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
// var ha = '<p>a</p>';
// $('div').append(ha);
//1
// var w = '<a href="#">f4</a>'
// $('div').append(w);
// var sele = '<select><option>1</option><option>2</option><option>3</option></select>'
// $('div').append(sele);
})
})
//2var pstr = '<p><b><i>白日依山尽</br>黄河入海流</br>欲穷千里目</br>更上一层楼</i></b></p>'; $('div').append(pstr);将其改成用js来写,效果一样
function ha() {
// var p= document.createElement('p');
// var b = document.createElement('b');
// var i = document.createElement('i');
// var neirong1 = document.createTextNode('白日依山尽');
// var br1=document.createElement('br')
// var neirong2 = document.createTextNode('黄河入海流');
// var br2 = document.createElement('br')
// var neirong3 = document.createTextNode('欲穷千里目');
// var br3 = document.createElement('br')
// var neirong4 = document.createTextNode('更上一层楼');
// i.appendChild(neirong1);
// i.appendChild(br1);
// i.appendChild(neirong2);
// i.appendChild(br2);
// i.appendChild(neirong3);
// i.appendChild(br3);
// i.appendChild(neirong4);
//
// b.appendChild(i);
// p.appendChild(b);
// document.getElementById('div1').appendChild(p);
}
</script>
</head>
<body>
<input id="Button1" type="button" value="创建节点" />
<input id="Button2" type="button" value="2" onclick="ha()" />
<div id="div1"></div>

您可能感兴趣的文章:

  • JavaScript DOM节点操作方法总结
  • JS实现动态添加DOM节点和事件的方法示例
  • JavaScript中对DOM节点的访问、创建、修改、删除
  • JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
  • JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
  • JavaScript DOM节点添加示例
  • JS构建页面的DOM节点结构的实现代码
  • JS访问DOM节点方法详解
  • JavaScript DOM节点操作实例小结(新建,删除HTML元素)
  • [js高手之路]HTML标签解释成DOM节点的实现方法
  • 原生js实现针对Dom节点的CRUD操作示例

《js和jquery对dom节点的操作(创建/追加).doc》

下载本文的Word格式文档,以方便收藏与打印。