입력 태그 옆에 div를 추가하는 방법

Question

나는 이와 같이 작성한 입력 필드가 있습니다.

var inputVal = document.createElement("input"); 

inputVal.setAttribute("type", "checkbox"); 
inputChek.onchange = select; 
inputChek.setAttribute("value", title); 

//inputChek.after(sortDiv); 
docClass.prepend(inputChek); 
docClass.append(newDiv); 

텍스트 바로 뒤에 화살표 이미지가있는 div를 추가하려고하지만 표시가되지 않습니다. div가 생성되고 있지만 그것은 다운됩니다.

var newDiv = document.createElement("div"); 

newDiv.setAttribute("class", "Arrow"); 
//sortDiv.style.display = ' transform: rotate(45deg), webkit-transform: rotate(45deg);'*/ 
newDiv.setAttribute("onclick",'divClick("title")'); 
newDiv.style.background = "red"; 
newDiv.style.width = "10px"; 
newDiv.style.height = "10px"; 

다음은 이미지입니다.

텍스트를 추가하고 싶습니다. 이 문제에 대한 해결책.

var root = document.getElementById("root"), 
 
    checkbox = document.createElement("input"), 
 
    block = document.createElement("div"); 
 

 
checkbox.type = "checkbox"; 
 
checkbox.value = "title"; 
 

 
block.className = "arrow"; 
 
block.setAttribute("onclick",'divClick("title")'); 
 
block.style.background = "red"; 
 
block.style.display = "inline-block"; 
 
block.style.width = "36px"; 
 
block.style.height = "12px"; 
 

 
root.appendChild(checkbox); 
 
root.appendChild(block); 
 

 
function divClick(text){ 
 
    console.log('you had just clicked the ' + text); 
 
}

<div id="root" class="form-group"></div>

Answer 1

당신이 원하는대로를 입력 한 후 div 요소를 추가
가 수정 (스타일) 할 수있는 방법의 기본 예입니다 왜 div (== block 요소)를 사용하고 span이 아닌가?