JS添加一个新元素到具体的位置。
发布网友
发布时间：2022-04-22 08:20
共4个回答
热心网友
时间：2022-04-22 15:15
//修改标签
function updateHTMLInfor(jsonObj,divId,allDivId){
//判断元素是否存在
if(jsonObj.dataId!=null&&jsonObj.dataId>0){
var divDataId=divId+jsonObj.dataId;
var dataDiv=$("#"+divDataId);
//如果元素存在，则改变代表个数的属性
if(dataDiv!=null)
{
var dataNum=dataDiv.attr('num');
if(dataNum!=null&&dataNum>0)
{
if(jsonObj.dataNum!=null&&jsonObj.dataNum>0){
if(jsonObj.dataName!=''&&jsonObj.dataName!=null){
dataNum=parseInt(dataNum)+parseInt(jsonObj.dataNum);
dataDiv.attr('num',dataNum);
var dataDivText=jsonObj.dataName+" "+dataNum;
dataDiv.text(dataDivText);
}
}
}else{//如果元素不存在，则直接追加
appendHTMLDiv(jsonObj,allDivId)
}
}else{
appendHTMLDiv(jsonObj,allDivId)
}
}
}
//追加新元素
function appendHTMLDiv(jsonObj,allDivId)
{
var allDataDiv=$("#"+allDivId);
var divHtml="<div class='css_class' price='"+jsonObj.dataPrice+"'>";
divHtml+="<div class='css_class1'><img src='"+jsonObj.dataUrl+"'"+ "alt='"+jsonObj.dataName+"' width='69' height='62'/> </div>";
divHtml+="<div id='data_"+jsonObj.dataId+"' num='"+jsonObj.dataNum+"' price='"+jsonObj.dataPrice+"' class='css_class2'>"+ jsonObj.dataName+" "+jsonObj.dataNum +"</div>";
divHtml+="</div>";
var newDataDiv=$(divHtml);
var price=jsonObj.dataPrice;
var dataDivArray=allDataDiv.children();
var insertDiv=null;
for(var i=0;i<dataDivArray.length;i++)
{
var dataPrice=dataDivArray[i].getAttribute("price");
if(dataPrice<price)
{
insertDiv=dataDivArray[i];
break;
}
}
if(insertDiv!=null)
{
newDataDiv.insertBefore(insertDiv);
}
else
{
allDataDiv.append(divHtml);
}
}
上述代码实现： 使用jQuery实现动态添加元素功能；需要按照元素的某个属性排序，如果当前元素存在，则直接修改用于表示个数的属性，否则需要按照元素的一个属性查找到合适的位置，新建元素并插入
热心网友
时间：2022-04-22 16:33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<body>
<div id="con">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<div id="box5">5</div>
</div>
<input type="button" onclick="doremove()" value="removebox4"/>
<input type="button" onclick="doadd()" value="addbox6"/>
<script type="text/javascript">
function doremove()
{
var obj = document.getElementById("box4");
if(!obj)
{
alert("box4 不存在");
}
document.getElementById("con").removeChild(obj);
}
function doadd()
{
var obj = document.getElementById("con");
var box5 = document.getElementById("box5");
var box6 = document.createElement("div");
box6.id = "box6";
box6.innerHTML="新的4";
obj.insertBefore(box6,box5);
}
</script>
</body>
</html>
代码写的很容易懂。测试过也没有问题。追问可不可以，不用obj.insertBefore(box6,box5); 因为我可能 删除第一个DIV或最后个，有其它方法吗，你写的我看懂的，非常感谢。
追答这些函数怎么用其实都是看你要什么样的功能。
根据功能不同用法还有流程控制都是不一样的。
如果需要了解更多的话，你可以百度搜下js 添加节点，删除节点这些关键字，可以找到很多的函数和属性，合理利用这些函数一定能完成你要的效果。
详细代码我就不写了。查了后没明白的话我再写给你。
热心网友
时间：2022-04-22 18:07
jQuery：
$("#box4").replaceWith("<div id='box7'></div>");
============================
按照你的步骤：
var box4_prev = $("#box4").prev();
$("#box4").remove();
box4_prev.after("<div id='box7'></div>");
=============================
建议用jQuery，用起来简单，功能比较强大，资源占用也比较少。
最主要的是，你不用太多考虑多浏览器的支持。追问可以用JS帮我写下嘛，不想用JQ。非常感谢。还有删除BOX4后添加的新元素还是在3和5中间的位置。谢谢啦
追答纯普通的js，其他人已经写了。
但你觉得哪种更好？
而且普通的js写的，或许只能在ie下有作用，那还有firfox,chrome,Opera,Safari等等呢？
怎么说呢，如果是学习的话，那肯定还是要从最普通的开始，那样才能知道个为什么。
也才可以碰到更多的问题，然后去解决那些问题。
但如果你是要实施应用，就不要用原始的JS了，书写繁琐不说，以后有个什么修改也是麻烦的很的，一点都不好维护
热心网友
时间：2022-04-22 19:59
<html>
<head>
<title>js DOM插入与追加</title>
<script type="text/javascript">
/*使用appendChild创建结点*/
function CreateNode(str) {
//创建新div
var NewDiv = document.createElement("div");
//对div设置 id属性
NewDiv.id = "dd";
NewDiv.style.border = "solid 1px red"
//创建div内加入的内容
var NewText = document.createTextNode(str);
//追加一个新的子结点
NewDiv.appendChild(NewText);
//返回新创建结点数据
return NewDiv;
}
//向指定结点前插入新结点函数
function AppBefore(nodeId, str) {
var node = document.getElementById(nodeId);
var newNode = CreateNode(str);
//如果存在双亲结点
if (node.parentNode) {
//insertBefore(newchild,refchild) 说明：newchild(插入的新结点) refchild(将新结点插入到此结点前)
node.parentNode.insertBefore(newNode, node);
}
}
//向指定结点内插入新结点函数
function insertWithin(nodeId, str) {
//指定结点 id
var node = document.getElementById(nodeId);
var newNode = CreateNode(str);
//追加一个新的结点
node.appendChild(newNode);
}
//向指定结点后插入新结点函数
function AppAfter(nodeId, str) {
var node = document.getElementById(nodeId);
var newNode = CreateNode(str);
//如果存在上一级结点
if (node.parentNode) {
//如果存在下一子结点
if (node.nextSibling) {
// 在下一子结点前插入子结点
node.parentNode.insertBefore(newNode, node.nextSibling);
} else {
// 如果没有下一子结点向后追加子结点
node.parentNode.appendChild(newNode);
}
}
}
function remove(removeid) {//指定节点的移除
var node = document.getElementById("box4");
node.parentNode.removeChild(node)
}
</script>
</head>
<body>
<h1><center> DOM JS 插入与追加</center></h1>
<hr>
<div id="con">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">box4</div>
<div id="box5">5</div>
</div>
<hr>
<!--/star-->
<form id="form" name="form" action="#" method="get">
<input type="text" id="files" name="files" value="默认文字">
<input type="button" value="指定结点前插入新结点" onclick="AppBefore('box3', document.form.files.value);">
<input type="button" value="指定结点中插入新结点" onclick="insertWithin('box3', document.form.files.value);">
<input type="button" value="指定结点后插入新结点" onclick="AppAfter('box3', document.form.files.value);">
<input type="button" value="删除指定节点" onclick="remove('box4');">
</form>
<!--/enf-->
</body>
</html>
