javascript - Why can I sort if I am using innerHTML and not outerHTML

问题描述

My code doesn't work in Firefox.

This simple form builder isn't written in the best possible way but still, I think it should still work.

Why can't I sort the added inputs appropriate if I am using outerHTML? I want to use OuterHTML but then it can only be sorted downwards.

How can I fix and why is it behaving like it does?

let id = 0;
		function add(type) {
	
	//Create an input type dynamically.
	let element = document.createElement("input");
	let div = document.createElement('div');
	let lable = document.createElement('label');
	let span = document.createElement('span');
	let br = document.createElement('br');
	
	//Assign different attributes to the element.	
	element.setAttribute("type", type);
	element.setAttribute("placeholder", "Hier Klicken");
	element.setAttribute("name", type);
	div.setAttribute("draggable", true);
	
	div.setAttribute("ondrop", "ondropself(event)");
	lable.innerHTML = "Hier drücken um zu ändern";
	
	div.style.textAlign = "right";
	div.style.width = "100%";

	var foo = document.getElementById("fooBar");
	
	//Append the element in page (in span).
	
	let ii = prompt("Wieviele Felder wollen sie?");
	//
	for(let j=0;j<ii;j++){
	
	id++;
	
	div.setAttribute("id", id );
	lable.setAttribute("id",id+"a");
	span.innerHTML = "X";
	span.style.textAlign = "right";
	span.setAttribute("onclick", "this.parentNode.remove(id)");
	lable.setAttribute("onclick", "labelReplace(this.parentNode.id)");
	div.setAttribute("ondragstart", "drag(event)");
	div.setAttribute("ondragover","allowDrop(event)");
    
    if(element.type==="button"){
        element.setAttribute("onclick","valueReplace(this.parentNode.id)");
        div.appendChild(element);
        div.appendChild(span);
        foo.appendChild(div.cloneNode(true));

    } else {

	div.appendChild(lable);
	div.appendChild(element);
	div.appendChild(span);
	
	foo.appendChild(div.cloneNode(true));
    }
	}	
}
function deletesp(el){
el.remove(id)
}

function valueReplace(a){
    let btnvalue = prompt('Button Name');
    ganzesEl = document.getElementById(a).innerHTML;
       
    ganzesEl = ganzesEl.replace('type="button"','type="button" value="'+btnvalue+'"');
    
    document.getElementById(a).innerHTML = ganzesEl;
}

function labelReplace(a){
					
    let labelText = prompt('Neuer Text');
    document.getElementById(a+"a").innerHTML = labelText;
}

function drag(idD1){
    let innerHvalue1 = document.getElementById(idD1.target.id).outerHTML;
    let idid = idD1.target.id;
    this.getIdD1 = function (){return idid};
    this.getouter =  function (){return innerHvalue1};
    
}

function allowDrop(event) {
event.preventDefault();
}

function ondropself(x){
event.preventDefault();

    const innerHvalue2 = document.getElementById(x.target.id).outerHTML;
    const innerHvalue3 = getouter();
    const ob2 =getIdD1();       
    document.getElementById(x.target.id).outerHTML = innerHvalue3;
    document.getElementById(ob2).outerHTML = innerHvalue2;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<meta charset="utf-8"> 

    <div class="container">
        <div class="row">
            <div class="col-md-6"></div>
            <div class="col-md-6">	
	<body>
	<form>
		<h2>Dynamically add textbox, and radio button in form</h2>
		<br/>
		<h3>Please select any type</h3>
		<select name="element">
			<option value="button">Button</option>
			<option value="text">TextBox</option>
			<option value="radio">Radio</option>
			<option value="number">number</option>
			<option value="reset">reset</option>
			<option value="password">password</option>
			<option value="image">image</option>
			<option value="email">email</option>
			<option value="time">time</option>
			<option value="date">date</option>

		</select>
		<input type="button" value="add" onclick="add(document.forms[0].element.value)"/>
		<ul id="fooBar"></ul>
	</form>
	
	
	
	</body></div>
		</div>	
    </div>
</div>
<span id="okkk" class="deletespan"></span>

标签： javascripthtml

javascript - Why can I sort if I am using innerHTML and not outerHTML

问题描述

解决方案

推荐阅读