创建元素并在附加到文档

Question

我尝试创建一个元素，然后在将该元素传递给文档之前将其附加到该元素。我不确定为什么我的代码无法正常工作，正在测试不同的方法。

＆＃13;

＆＃13;

var count = 0;
	function addElement() {

		count++;

		// Create plan element
		var newElement = document.createElement("li");
		newElement.classList.add("collection-item");

		var main = document.createElement("div");
		var side = document.createElement("a");
		side.classList.add("secondary-content");
		main.appendChild(side);
		newElement.appendChild(main);

		// append element to plan layout
		planDesign.appendChild(newElement);

		// get values
		var exercise = newExcersise.value;
		var set = newSet.value;
		var rep = newRep.value;
		main.innerHTML = "<span>" + count + ".</span>" + exercise;
		side.innerHTML = "<span>Sets: </span>" + set + " <span>Reps: </span>" + rep;
	}

＆＃13;

＆＃13;

＆＃13;

我需要获得创建的＆＃34; a＆＃34;要插入＆＃34; div＆＃34;。

的元素

Answer 1

您使用两种不同的技术来完成相同的操作，并且当您说：

时，它会导致您覆盖main元素的内容

main.innerHTML = "<span>" + count + ".</span>" + exercise;

成功将side元素附加到main后

。

尽可能保持一致。您正在使用document.createElement()，element.innerHTML和element.appendChild() - 执行相同操作的不同方式。

如果您更改代码以便使用DOM API创建新节点（而不是使用连接字符串创建HTML），您将能够更好地控制元素的配置以及它们的位置。

var spn = document.createElement("span");
spn.textContent = count + ".";
main.appendChild(spn);

var text = document.createTextNode(exercise);
main.appendChild(text);