0

I'm trying to achieve something like templating with JS. The example use-case is, I have page with two objects, rectangle and circle. When I click on rectangle it should show me html button with text DELETE RECTANGLE.

In reality, I will call ajax get on template file (panel.htm) to get what is inside this file. Then I create div element using JS. Then I populate innerHTML with panel.htm(template). In this template is .

What I want is to change this button inner html inside the created and populated div. Im using getByClass because ById is not defined for element.

BUT changes to the button are not propagated/copied to original div. 

  
   // Template data
   var html = `<div>
                   <button class="delBtn" type="button">OLD TEXT</button> <br>
               </div>`;
     
   // creating new div.
   var div = document.createElement('div');

   // putting template to new div
   div.innerHTML = html;

   // accessing the button from the inserted template
   div.getElementsByClassName('delBtn').innerHTML = "NEW BUTTON TEXT";
   
   // There I would expect to get div with button inside with NEW TEXT
   console.log(div);

   // In production here will be some insertion to page etc. This is just bare example of code.

I know this is possible to solve using some template framework. But I would like to stay to clean JS if possible. Also this is new for me, so I would like to learn little bit, and I did not manage to find some answer anywhere.

This seems to me like pure basic stuff so I hope this question is not redundant.

DrMacak
  • 15
  • 5
  • 1
    div.getElementsByClassName('delBtn')[0].innerHTML = "NEW BUTTON TEXT"; ... select the first element like this. I would recommend giving it an id and selecting it that way, as, i dont know if you would, but you may use 'delBtn' class again – thatOneGuy Oct 12 '16 at 09:18
  • so basically you want to change the button text only ?? – Baezid Mostafa Oct 12 '16 at 09:31
  • @thatOneGuy: I agree but, is there a way to getElement By Id just for this div? From what I found I can el. by Id just from document. – DrMacak Oct 12 '16 at 09:36
  • @DrMacak youll have to use query selectors. So document.querySelector('div .delBtn'); This will get the first element of class 'delBtn' inside the first div. Again I recommend giving the div an id. **You can use 'querySelectAll' here too – thatOneGuy Oct 12 '16 at 09:44
  • @thatOneGuy Yes, but when I will give button an id and then I will change the line to div.getElementById('delBtn').innerHTML = "NEWTEXT". It doesnt work because div is element and does not have this method. And in my case the div element is not append on page yet. So document.getElementById will return null. – DrMacak Oct 12 '16 at 09:50
  • Ahh ok i understand now. Is the selected answer what you need ? Or do you want to ammend the innerHTML before appending ? – thatOneGuy Oct 12 '16 at 09:55
  • @thatOneGuy The selected answer means that it will work, but I have to use class instead of id. That's not nice solution, but should be ok. – DrMacak Oct 12 '16 at 10:35

2 Answers2

0

The getByClass returns always an HTMLCollection so you might want to get the first like

div.getElementsByClassName('delBtn')[0].innerHTML = "NEW BUTTON TEXT";

This will work!

Also if you want to try it do

document.body.appendChild(div);
Panagiotis Vrs
  • 824
  • 6
  • 16
0

@thatOneGuy is right you will need to select the index of the class you are trying to get but also your div variable will display

<div>
    <div>
        <button class="delBtn" type="button">OLD TEXT</button> <br>
    </div>
</div>
andreas
  • 16,357
  • 12
  • 72
  • 76
DaveHutchy
  • 57
  • 6