原生js追加html代码,原生js实现给指定元素的后面追加内容

复制代码 代码如下:

var header1 = document.getElementById("header");

var p = document.createElement("p"); // 创建一个元素节点

insertAfter(p,header1); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法

function insertAfter( newElement, targetElement ){ // newElement是要追加的元素 targetElement 是指定元素的位置

var parent = targetElement.parentNode; // 找到指定元素的父节点

if( parent.lastChild == targetElement ){ // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法

parent.appendChild( newElement, targetElement );

}else{

parent.insertBefore( newElement, targetElement.nextSibling );

};

};

http://www.dengb.com/Javascript/335426.htmlwww.dengb.comtruehttp://www.dengb.com/Javascript/335426.htmlTechArticle复制代码 代码如下: var header1 = document.getElementById("header"); var p = document.createElement("p"); // 创建一个元素节点 insertAfter(p,header1); // 因为js没有...

  • 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、付费专栏及课程。

余额充值