【转】html5学习--js创建与追加元素

原文链接js创建与追加元素http://www.cnblogs.com/wbengineer/p/4709605.html

<div>
    <button onclick="creatEle" id="btn">点击创建新btn</button>
<div>

<script>
//创建一个新btn
var newBtn = document.creatElement('button');
newBtn.value="value";
newBtn.style.width = 50px;
newBtn.style.height = 50px;
//追加新创建的btn
var oldBtn = document.getElementById('btn');
var parentNode = oldBtn.parentNode;
//parentNode.insertBefore(newBtn,oldBtn);//在原有btn的前面插入新创建的btn;
parentNode.insertBefore(newBtn,oldBtn.nextSiblings)//将在原有btn的后面插入新创建的btn,!!!原因是没有insetAfter!!所以用nextSiblings
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript,我们可以使用多种方式来追加HTML代码。以下是几种常用的方法: 1. 使用innerHTML属性:可以直接通过元素的innerHTML属性来设置其内容,从而实现HTML代码的追加。例如,如果我们有一个div元素,我们可以通过以下方式来追加HTML代码: ``` var div = document.getElementById("myDiv"); div.innerHTML += "<p>这是新追加HTML代码</p>"; ``` 这个方法非常简单和直接,但要注意的是,使用innerHTML属性会移除原有的元素及其所有子元素,并重新创建新的元素树。 2. 使用DOM操作:除了innerHTML属性,我们还可以使用DOM操作来追加HTML代码。首先,我们可以创建一个新的元素节点,然后通过appendChild方法将其添加到现有的元素。例如: ``` var div = document.getElementById("myDiv"); var p = document.createElement("p"); var textNode = document.createTextNode("这是新追加HTML代码"); p.appendChild(textNode); div.appendChild(p); ``` 这种方法相对复杂一些,但是它具有更高的灵活性和控制性,可以更好地操作和管理元素。 3. 使用jQuery库:如果你使用了jQuery库,可以使用其提供的append方法来追加HTML代码。例如: ``` $("#myDiv").append("<p>这是新追加HTML代码</p>"); ``` 这个方法非常方便和简洁,可以大大简化代码的编写,并提供了更多的API来处理元素和事件。 总结来说,无论是使用原生JavaScript还是jQuery库,我们都可以通过innerHTML属性、DOM操作或者jQuery的append方法来追加HTML代码。根据具体的需求和情况,选择适合自己的方法即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值