Append Element Into Element

Question

It might sound stupid , but i didn't find the correct way to achieve this . I want to create an element(in our example a div element) and add to it the textarea value . In my example it seems that the element is created but i cant embed it into the #notesPosition . I achieve this with JQuery but i`am not sure whats the best way to do it with pure Javascript.

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>

You mean document.getElementById('notesPosition').appendChild(newEl);? — j08691
– j08691, Commented Mar 29, 2017 at 20:27
@j08691 It seems that i tried appendChild but i was getting an error . — Clickys
– Clickys, Commented Mar 29, 2017 at 20:27

Geander · Accepted Answer · 2017-03-29 20:28:43Z

3

Hello

Check if this helps:

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

to:

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

I hope it helped you!

answered Mar 29, 2017 at 20:28

Geander

3881 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Clickys Over a year ago

thank you for you answer , this is stupid maybe my brain spinning , i tried the append() method to insert my created div into the notesPositionToAdd and appendChild as well and none of them worked thats why i asked for help . Maybe it was my browser cache or something . this is really weird .

j08691 Over a year ago

.append() is experimental at the moment. Better to use .appendChild(). developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

Clickys Over a year ago

@j08691 yeah saw that mate , thank you for mention it .

user3094755 · Accepted Answer · 2017-03-29 20:32:05Z

0

If you want to addTextNode() then you can...

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

alternatively

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

alternatively

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

answered Mar 29, 2017 at 20:32

user3094755

1,65117 silver badges24 bronze badges

Collectives™ on Stack Overflow

Append Element Into Element

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related