# How to notify that New Element exists ?

**URL:** <https://forum.kirupa.com/t/how-to-notify-that-new-element-exists/640419>\
**Category:** Uncategorized\
**Created:** [September 6, 2019, 3:39pm UTC](https://forum.kirupa.com/t/how-to-notify-that-new-element-exists/640419 "2019-09-06T15:39:21Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [September 6, 2019, 3:39pm UTC](https://forum.kirupa.com/t/how-to-notify-that-new-element-exists/640419/1 "2019-09-06T15:39:22Z")

</div>

Hello & Thanks;  
Same program , newest problem:  
[http://vmars.us/ShowMe/changeImage-Drag-Create-Restore.html](http://vmars.us/ShowMe/changeImage-Drag-Create-Restore.html)

```auto
         var MyDivs; var MyDivsCount; var i; var content;
         var has_Focus = "none yet" ;
         
         function createMyNewDiv() {
         
var MyNewDiv = document.createElement("div");
                   console.log('MyNewDiv = ' + MyNewDiv);
                   MyNewDiv.setAttribute("class", "MyDiv");
                   MyNewDiv.innerHTML = "<div class='MyDivHeader'></div> <textarea class='txt' rows='4' cols='12'> </textarea> <br>";
                   content = document.getElementById("divStretch");
                   content.appendChild(MyNewDiv); 
                   dragElement(MyNewDiv);
                   
var MyNewPre = document.createElement("pre");
                   console.log('MyNewPre = ' + MyNewPre);
                   MyNewPre.setAttribute("contenteditable", "true");
                   MyNewPre.setAttribute("class", "pasteInto");
var preList = document.querySelectorAll("pre");
                   content = document.getElementById("preDiv");
                   content.appendChild(MyNewPre); 
}//	
```

As I create a new class=“copyFrom” ,  
I notify dragElement(MyNewDiv); that it exists ,  
But ’ function saveItAll() ’ still thinks there is only 1 class=“copyFrom” . (Because it only copies ‘textarea 0’ to ‘pre-area 0’).  
So I think I need to notify Somebody that there is a new element in town .  
If that is the problem , how do I notify the powers that manage such things ?  
Thanks

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 6, 2019, 4:37pm UTC](https://forum.kirupa.com/t/how-to-notify-that-new-element-exists/640419/2 "2019-09-06T16:37:09Z")

</div>

Each time you call saveItAll, you can refreshing your list of elements based on this line:

```
var fromList = document.getElementsByClassName("copyFrom");

```

Are you not seeing the number of items in `fromList` increasing?

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [September 6, 2019, 6:51pm UTC](https://forum.kirupa.com/t/how-to-notify-that-new-element-exists/640419/3 "2019-09-06T18:51:11Z")

</div>

Even when I add two textareas  
fromList.length remains at 1 .  
[http://vmars.us/ShowMe/changeImage-Drag-Create-Restore.html](http://vmars.us/ShowMe/changeImage-Drag-Create-Restore.html)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 7, 2019, 6:18am UTC](https://forum.kirupa.com/t/how-to-notify-that-new-element-exists/640419/4 "2019-09-07T06:18:32Z")

</div>

In your DevTools, what do the two textareas show up as? What is the HTML that is generated?

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [September 7, 2019, 2:24pm UTC](https://forum.kirupa.com/t/how-to-notify-that-new-element-exists/640419/5 "2019-09-07T14:24:10Z")

</div>

Here is the console output .  
I first add two textareas .  
Then click on Button  
" BackUp myWork Until ‘Save This Page’ " .

I am wondering if  
the way I have created new textarea ,  
would be causing a problem .  
I do this to create MyDivHeader & textarea .

```auto
<script>
         var MyDivs; var MyDivsCount; var i; var content;
         var has_Focus = "none yet" ;
         
         function createMyNewDiv() {
         
var MyNewDiv = document.createElement("div");
                   console.log('MyNewDiv = ' + MyNewDiv);
                   MyNewDiv.setAttribute("class", "MyDiv");
                   MyNewDiv.innerHTML = "<div class='MyDivHeader'></div> <textarea class='txt' rows='4' cols='12'> </textarea> <br>";
                   content = document.getElementById("divStretch");
                   content.appendChild(MyNewDiv); 
                   dragElement(MyNewDiv);
                   
var MyNewPre = document.createElement("pre");
                   console.log('MyNewPre = ' + MyNewPre);
                   MyNewPre.setAttribute("contenteditable", "true");
                   MyNewPre.setAttribute("class", "pasteInto");
var preList = document.querySelectorAll("pre");
                   content = document.getElementById("preDiv");
                   content.appendChild(MyNewPre); 
}//	
 </script>	
```

Also, I tried using intoList.length; instead of  
fromList.length; . But get the same results .  
Thanks

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [September 10, 2019, 8:18pm UTC](https://forum.kirupa.com/t/how-to-notify-that-new-element-exists/640419/6 "2019-09-10T20:18:19Z")

</div>

> [@kirupa](#):
>
> In your DevTools, what do the two textareas show up as? What is the HTML that is generated?

The code that gets generated (AFTER I save the page) is this:

```auto
<div class="MyDiv" style="top: 65px; left: 202px;">
<div class="MyDivHeader"></div>
 <textarea class="txt" rows="4" cols="12"> </textarea>
 <br></div>
<div class="MyDiv" style="top: 103px; left: 374px;">
<div class="MyDivHeader"></div> 
<textarea class="txt" rows="4" cols="12"> </textarea> 
<br></div>
</div> <!-- id="divStretch" -->
and this:
<pre contenteditable="true" class="pasteInto"></pre>
<pre contenteditable="true" class="pasteInto"></pre></div>

```

It looks ok to me , and you ?  
But the code that shows up in the console sources is this:

```auto
<div id="divStretch">
    <div class="MyDiv">
      <div class="MyDivHeader"></div>
             <textarea class="copyFrom" rows="4" cols="12">stuff in textarea 0 </textarea>   
    </div>
</div> <!-- id="divStretch" -->
and this:
<div id="preDiv">
<pre contenteditable="true" class="pasteInto" ></pre>
</div>
```

No change in the console sources ,  
jis that normal ? .  
Doesn’t look like what I am after ?  
Thanks

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 10, 2019, 10:44pm UTC](https://forum.kirupa.com/t/how-to-notify-that-new-element-exists/640419/7 "2019-09-10T22:44:09Z")

</div>

I may be wrong here, but it seems like the issue is that your `copyFrom` variable doesn’t have an up-to-date list of all the textareas on the page. Looking at the code that gets generated, your textareas don’t have the **copyFrom** class on them, so how will the code know what element to get the values from?

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [September 11, 2019, 12:57am UTC](https://forum.kirupa.com/t/how-to-notify-that-new-element-exists/640419/8 "2019-09-11T00:57:50Z")

</div>

Thanks Kirupa;  
Your Help led me to realize that I don’t even need ‘pre’ and ‘copyInto’’ .  
I can just use:  
fromList[i].innerHTML = fromList[i].value ;  
So that function now looks like:

```auto
<script>
var copyFromVar = "one"; var fromList; var intoList; 
function saveItAll() {
var blankVar = "";
  fromList = document.getElementsByClassName("copyFrom");
  for (var i = 0; i < fromList.length; i++) {
    fromList[i].innerHTML = fromList[i].value ;
  }
}// ========================================
</script> 
```

I am better understanding the diff between  
.value and .iinerHTML .  
Thanks