Question 36095 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Append inside a child difficulties – Jquery

This is my current situation. I got one parent called "box" which got 15 childrens inside called item.
Then I got a loop where I append some text that should be inside the children div. If I append it directly inside the children the code gets messed up and I get the 15 things I want to inside in each children in all of them. So I have to append inside my parent. However I found this smart function called appendChild which at first was not a function because I wanted to insert a string if I understood correctly… Then I found this solution In how to make it a function but in the end it still doesn’t gets placed in my children div. How am I supposed to do in my case? I guess

This is my code at the moment;

<div id = "box">
  <div class = "item"></div> X15
</div>

$.each() {
    var element = document.getElementById("result");
    element.appendChild("coolText");
});

Got this error last check: Error: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

Tags:

2

Answers


  1. 0

    You can use a forEach to iterate the items and append the content one by one. Like this:

    const box = document.getElementById('box');
const items = document.querySelectorAll('.item');

items.forEach(item => {
  let content = document.createTextNode("text");
  item.append(content);
});
    <div id = "box">
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
</div>

    Or if you want to use Jquey

    const box = document.getElementById('box');
const items = document.querySelectorAll('.item');

$.each(items, (i, item) => {
  let content = document.createTextNode("text");
  item.append(content);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "box">
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
</div>
    Login or Signup to reply.
  2. 0

    For use $.each you need to pass items like:

    const items = $('.item');

$.each(items, (i, item) => {
  $(item).text('text');
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "box">
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search