Element in Element anhängen

Question

Es klingt vielleicht dumm, aber ich habe nicht den richtigen Weg gefunden, dies zu erreichen. Ich möchte ein Element erstellen (in unserem Beispiel ein div-Element) und ihm den Textarea-Wert hinzufügen. In meinem Beispiel scheint das Element erstellt zu sein, aber ich kann es nicht in die #notesPosition einbetten. Ich erreiche dies mit JQuery, aber ich bin nicht sicher, was der beste Weg ist, es mit reinem Javascript zu tun.

var notesPositionToAdd = document.getElementById('notesPosition'); 
 
var notesTextareaBtn = document.getElementById('btnAddNotes'); 
 

 

 
notesTextareaBtn.addEventListener('click', function(e) { 
 
    e.preventDefault(); 
 
    var notesTextarea = document.getElementById('addNotesTextarea').value; 
 
    console.log(notesTextarea); 
 
    var newEl = document.createElement('div'); 
 

 

 
    newEl.append(notesTextarea); 
 
    newEl.className += " col-lg-2"; 
 
    console.log(newEl); 
 

 

 

 
});

<div class="row "> 
 
    <div class="col-lg-4 col-md-4 col-sm-4 col-12 offset-md-8 "> 
 
    <form id="newNoteForm"> 
 
     <div class="form-group offset-lg-6"> 
 
     <i class="fa fa-times text-md-right " aria-hidden="true"></i> 
 
     <label for="addNotesTextarea">Add notes !</label> 
 
     <textarea class="form-control" id="addNotesTextarea" rows="3"></textarea> 
 
     <input class="btn btn-danger btn-sm" type="submit" value="Add" id="btnAddNotes"> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div> 
 
<div class="row" id="notesPosition"> 
 

 
</div>

Answer 1

Hallo

Überprüfen Sie, ob das hilft:

newEl.append(notesTextarea); 
newEl.className += " col-lg-2"; 
console.log(newEl); 

zu:

newEl.append(notesTextarea); 
newEl.className += " col-lg-2"; 
notesPositionToAdd.append(newEl); 
console.log(newEl); 

I hoffe es hat dir geholfen!

Answer 2

Wenn Sie addTextNode() wollen, dann können Sie ...

var div = document.createElement('div'); 
var txt = document.createTextNode('Whatever Text'); 
    div.appendChild(txt); 

alternativ

var div = document.createElement('div') 
    div.innerHTML = 'Whatever Text' // Whatever text parsed, <p>Words</p> is OK 

alternativ

var div - document.createElement('div') 
    div.textContent = 'Whatever' // Not parsed as HTML