# Children Not Added Properly To DOM Element

**URL:** <https://discuss.kotlinlang.org/t/children-not-added-properly-to-dom-element/2379>\
**Category:** JavaScript\
**Created:** [March 10, 2017, 1:10am UTC](https://discuss.kotlinlang.org/t/children-not-added-properly-to-dom-element/2379 "2017-03-10T01:10:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![napperley](https://avatars.discourse-cdn.com/v4/letter/n/90db22/32.png) [@napperley](https://discuss.kotlinlang.org/u/napperley)\
**Post date:** [March 10, 2017, 1:10am UTC](https://discuss.kotlinlang.org/t/children-not-added-properly-to-dom-element/2379/1 "2017-03-10T01:10:05Z")

</div>

When adding child elements to the parent element in the DOM not all of them get added. The console output correctly lists the child elements to add to the parent element. Appears as though the **appendChild** function in **org.w3c.dom.Node** in the Kotlin JS standard library isn’t behaving properly. Below is the defined function where the issue occurs:

```
private fun changeElement(element: ParentHtmlElement, domElement: Element) {
    val newChildren = element.toDomElement().childNodes.asList()

    domElement.clearAttributes()
    domElement.clearChildren()
    element.attributes.forEach { (key, value) -> domElement.setAttribute(key, value) }
    if (element.id.isNotEmpty()) domElement.id = element.id
    if (element.txtContent.isEmpty()) {
        domElement.textContent = null
    } else {
        domElement.textContent = element.txtContent
    }
    // TODO: Remove the line below.
    newChildren.forEach { println("Item: ${it.textContent}") }<img src="//cdck-file-uploads-us1.s3.dualstack.us-west-2.amazonaws.com/flex019/uploads/kotlinlang/original/2X/4/435087ac2ad1e26c9a1a0a15d2148dc4324bd537.png" width="657" height="410">
    newChildren.forEach { domElement.appendChild(it) }
}

```

Is there a workaround for adding child elements to a parent element? Below is a screenshot of the results:

![](https://us1.discourse-cdn.com/flex019/uploads/kotlinlang/original/2X/1/1b124270239966dddea740d987b9e09a5a9b5301.png)

---

<div class="post-metadata">

**Author:** ![napperley](https://avatars.discourse-cdn.com/v4/letter/n/90db22/32.png) [@napperley](https://discuss.kotlinlang.org/u/napperley)\
**Post date:** [March 10, 2017, 4:47am UTC](https://discuss.kotlinlang.org/t/children-not-added-properly-to-dom-element/2379/2 "2017-03-10T04:47:06Z")

</div>

Turns out that using the **replaceWith** function instead of the **appendChild** function fixes the issue. Below is the revised code sample:

```
fun Document.updateElementById(init: () -> Tag) {
    val tag = init()
    val domElement = document.getElementById(tag.id)

    domElement?.replaceWith(tag.toDomElement())
}

```

Not an ideal solution since more resources are required to create a new DOM Element that replaces the existing one.

---

<div class="post-metadata">

**Author:** ![Alexey.Andreev](https://avatars.discourse-cdn.com/v4/letter/a/e36b37/32.png) [@Alexey.Andreev](https://discuss.kotlinlang.org/u/Alexey.Andreev)\
**Post date:** [March 10, 2017, 7:54am UTC](https://discuss.kotlinlang.org/t/children-not-added-properly-to-dom-element/2379/3 "2017-03-10T07:54:32Z")

</div>

I have no idea what is a `ParentHtmlElement` and how you use the provided function. Without self-contained example it’s hard to tell what goes wrong. One thing I can tell definitely is that `appendChild` is defined in the following way:

```auto
public external abstract class Node : EventTarget {
    // some code skipped
    fun appendChild(node: Node): Node

```

**Withot body**! This means, it’s not Kotlin implementation, it’s just declaration of existing JavaScript DOM API. You can check yourself by just navigating to `appendChild` function in IDEA. If something goes wrong, please, check that you are using DOM API properly. Documentation can be found on [MDN](https://developer.mozilla.org/en/docs/Web/API/Node/appendChild), for example.