javascript - Create element and append a second element to it before appending to document - Stack Overflow

admin管理员组

文章数量:1391960

I'm trying to create an element, and then append another element to the element before passing it to the document. I'm not sure why my code won't work, been testing out different methods.

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

I'm trying to create an element, and then append another element to the element before passing it to the document. I'm not sure why my code won't work, been testing out different methods.

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

I need to get the created "a" element to be inserted into the "div".

• javascript
• appendchild

Share Improve this question Follow asked Dec 11, 2017 at 0:36 Sander HellesøSander Hellesø 27111 gold badge77 silver badges1616 bronze badges 1

• 1 main.innerHTML = this replaces the innerHTML of main ... including the side element – Jaromanda X Commented Dec 11, 2017 at 0:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You are using two different techniques to acplish the same thing and it's causing you to overwrite your main element's content when you say:

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

after successfully appending the side element into main.

Be consistent when you can. You are using document.createElement(), element.innerHTML and element.appendChild() - different ways of doing the same thing.

If you change the code so that you use the DOM API for creating new nodes (as opposed to creating HTML out of concatenated strings), you will be able to better control the configuration of your elements and where they go.

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

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

本文标签： javascriptCreate element and append a second element to it before appending to documentStack Overflow