创建元素并在附加到文档之前附加第二个元素

Question

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

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;
	}

我需要将创建的“a”元素插入到“div”中。

Answer 1

您正在使用两种不同的技术来完成同一件事，当您说：

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);