Unable to retrieve the divs once they have been appended to a different HTML file

Question

Unable to retrieve the divs once they have been appended to a different HTML file

<div id="div1">
  <div id="div2">
  </div>
  <div id="div3"></div>
  <div id="div4">
    <div id="div5">
      <div id="div6">
      </div>
      <div id="divcontent">
      </div>
    </div>
    <div id="divButtons">
    </div>
  </div>
  <div id="footer"></div>
</div>

I am facing an issue with appending buttons and text after including the above divs in my HTML file. I have attempted to add buttons to divButtons using jQuery, but without success. Here is what I tried:

$("#div1").children('#divButtons').append('<button></button>');
$('#divButtons').append('<button></button>')

If you have any suggestions or corrections for me, please advise on how to resolve this matter effectively. Thank you.

javascript jquery html css

Answer 1

Answer №1

Instead of using .children, try utilizing .find.

The usage of .children() differs from .find() as .children() only goes down a single level in the DOM tree.

^{https://api.jquery.com/children/}

$("#div1").find('#divButtons').append('<button></button>');
$('#divButtons').append('<button></button>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <div id="div2">
  </div>
  <div id="div3"></div>
  <div id="div4">
    <div id="div5">
      <div id="div6">
      </div>
      <div id="divcontent">
      </div>
    </div>
    <div id="divButtons">
    </div>
  </div>
  <div id="footer"></div>
</div>

Note: When dealing with an element like divButtons which has an id, there's no necessity to use children or find because its uniqueness is assured.

Answer 2

Instead of using .children, try utilizing .find.

The usage of .children() differs from .find() as .children() only goes down a single level in the DOM tree.

^{https://api.jquery.com/children/}

$("#div1").find('#divButtons').append('<button></button>');
$('#divButtons').append('<button></button>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <div id="div2">
  </div>
  <div id="div3"></div>
  <div id="div4">
    <div id="div5">
      <div id="div6">
      </div>
      <div id="divcontent">
      </div>
    </div>
    <div id="divButtons">
    </div>
  </div>
  <div id="footer"></div>
</div>

Note: When dealing with an element like divButtons which has an id, there's no necessity to use children or find because its uniqueness is assured.

Answer 3

Answer №2

Opt for find instead of children and ensure your script is wrapped in the document.ready function. Alternatively, just use $('#divButton') and $('#divContent') as IDs should be unique.

$(function(){
$("#div1").find('#divButtons').append('<button>hello</button>');
$('#divButtons').append('<button>hello</button>')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <div id="div2">
  </div>
  <div id="div3"></div>
  <div id="div4">
    <div id="div5">
      <div id="div6">
      </div>
      <div id="divcontent">
      </div>
    </div>
    <div id="divButtons">
    </div>
  </div>
  <div id="footer"></div>
</div>

Answer 4

Opt for find instead of children and ensure your script is wrapped in the document.ready function. Alternatively, just use $('#divButton') and $('#divContent') as IDs should be unique.

$(function(){
$("#div1").find('#divButtons').append('<button>hello</button>');
$('#divButtons').append('<button>hello</button>')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <div id="div2">
  </div>
  <div id="div3"></div>
  <div id="div4">
    <div id="div5">
      <div id="div6">
      </div>
      <div id="divcontent">
      </div>
    </div>
    <div id="divButtons">
    </div>
  </div>
  <div id="footer"></div>
</div>

Unable to retrieve the divs once they have been appended to a different HTML file

Answer №1

Answer №2

Similar questions

Could you please explain the specific distinctions between pipe and map within Angular 7?

Tips for maintaining proper alignment of the element within the given space and organizing it vertically with appropriate spacing

The input text in the Typeahead field does not reset even after calling this.setState

Gather various input files to attach to FormData

I have successfully implemented a click effect on one image and now I wish to apply the same effect to the remaining images

Tips for extracting key values from an array of objects in Typescript

When I click on my navbar toggle button, why isn't my text displaying?

Creating a FormArray in Angular allows you to dynamically

Modify the design of the button in the CSS code

Uploading images seamlessly through ajax

Tips for choosing a parent element using SCSS

Error: The Mui Material Breakpoints Theme Cannot Be Located

various methods for fetching array types (information retrieved through graphql)

Guide on how to receive multiple responses from a single ajax request in PHP

Attempting to change the text of a Bootstrap button using jQuery when clicked

What is the reason for not storing information from MySQL?

React Hooks: In useEffect(), unable to modify parent component's state

A guide on tallying the characters within an input text

Implementing Ajax Js to search within a specific div - reducing text overload on the page

Show a clear box over an HTML table row upon mouseover, without highlighting the row