jQuery追加新的元素，便于排序-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_13003/article/details/82406625

本文介绍了一种使用JavaScript和jQuery动态创建与更新DOM元素的方法，并展示了如何在页面上添加新的内容块。通过实例演示了如何针对特定业务需求定制DOM元素的样式与内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


var element = document.createElement(tagName);

// create a new div element
  // and give it some content
  newDiv = document.createElement("div");
  newContent = document.createTextNode("Hi there and greetings!");
  newDiv.appendChild(newContent); //add the text node to the newly created div.

  // add the newly created element and it's content into the DOM
  my_div = document.getElementById("org_div1");
  document.body.insertBefore(newDiv, my_div);


<ul id="ul_collect" style="position: absolute;left: -75px;width: 940px;">
		<li transId="_TRANS_ID.NUONUO" transName="" url="" class="infoBtn swapImage fucai" style="background-image: url('/images/collect/zyt_btn.png');">
			诺诺</li>
		<li transId="_TRANS_ID.YOUBANG" transName="" url="" class="infoBtn swapImage fucai" style="background-image: url('/images/collect/zyt_btn.png');">
			友邦</li>
		<li transId="_TRANS_ID.GUANGFA" transName="" url="" class="infoBtn swapImage fucai" style="background-image: url('/images/collect/wlbtysh_btn.png');">
			广发银行</li>
		<li transId="_TRANS_ID.PINGAN" transName="" url="" class="infoBtn swapImage fucai" style="background-image: url('/images/collect/wlbtysh_btn.png');">
			平安银行</li>
	</ul>


_STAGE.currentBiz = "pingan|nuonuo";


var currentBizArr = _STAGE.currentBiz.split("|");
		jQuery("#ul_collect").empty();
		for(var i = 0; i < currentBizArr.length; i++){
			jQuery("#ul_collect").append(document.createElement("li")).find("li").eq(i).attr("transId",
			"_TRANS_ID."+(currentBizArr[i].toUpperCase())).addClass("infoBtn swapImage fucai").attr("style", 
			"background-image: url('/images/collect/wlbtysh_btn.png');").text(currentBizArr[i].toUpperCase());
		}

		jQuery("li").css({
			"width" : "419",
			"height" : "91",
			"border" : "0",
			"vertical-align" : "middle",
			"font-size" : "22px",
			"color" : "white",
			"line-height" : "3.5"
		}).addClass("text_center");

、、追加词典对应值：


// 信息收集业务文字
	currentBizText : {
		"guangfa" : "广发银行",
		"pingan" : "平安银行",
		"nuonuo" : "诺诺",
		"youbang" : "友邦"
	},

for(var i = 0; i < currentBizArr.length; i++){
			jQuery("#ul_collect").append(document.createElement("li")).find("li").eq(i).attr("transId",
			"_TRANS_ID."+(currentBizArr[i].toUpperCase())).addClass("infoBtn swapImage fucai").attr("style", 
			"background-image: url('/images/collect/wlbtysh_btn.png');").text(this.currentBizText[currentBizArr[i]]);
		}

[size=large][color=red]this.currentBizText[currentBizArr[i]][/color][/size]