Append an html to parent of a div

javascript append html to body
javascript append html string
jquery add text to div
append javascript array
javascript insert html after element
append vs appendchild
onclick append div
insertadjacenthtml

I have this code :

<div class="time-widget">
    <select id="p_h_0_startHour_hour" name="" class="form-control select-time form-control">
        <option value="0">
          00
        </option>
        ........    
    </select>
</div

From java script I want to append and html before div with class='time-widget' :

$('<div>hello</div>').appendTo('#p_h_'+i+'_startHour_hour').parent();

But this html is adding to the select box not in front of time-widget div. Any suggestions ?Thx in advance.

Change $('<div>hello</div>').appendTo('#p_h_'+i+'_startHour_hour').parent(); to $('<div>hello</div>').insertBefore($('#p_h_'+i+'_startHour_hour').parent());

You have to append it to an element.

demo

$('<div>hello</div>').insertBefore($('#p_h_0_startHour_hour').parent());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="time-widget">
  <select id="p_h_0_startHour_hour" name="" class="form-control select-time form-control">
    <option value="0">
      00
    </option>
  </select>
</div>

.append(), The appendChild() method appends a node as the last child of a node. Tip: If you want to Example. Create a <p> element and append it to a <div> element:. One of the common CSS techniques that can be a bit tricky at first is being able to absolutely position a child div element within a parent div container, relative to the parent. There are numerous scenarios where you might require this sort of positioning for div and other HTML elements.

What you want is to insert BEFORE $('#p_h_'+i+'_startHour_hour') because '#p_h_'+i+'_startHour_hour' is just a text, you forgot to put the $ and to say you want it to be BEFORE (use insertBefore())

var i = 0;
$('<div>hello</div>').insertBefore(($('#p_h_'+i+'_startHour_hour').parent()));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="time-widget">
    <select id="p_h_0_startHour_hour" name="" class="form-control select-time form-control">
        <option value="0">
          00
        </option>
        ........    
    </select>
</div>

HTML DOM appendChild() Method, Given this HTML <div class="a"> <span></span> </div> <div class="b"></div>. and this JavaScript that uses appendChild method: const span  The appendChild() method appends a node as the last child of a node. Tip: If you want to create a new paragraph, with text, remember to create the text as a Text node which you append to the paragraph, then append the paragraph to the document. You can also use this method to move an element from one element to another (See "More Examples").

Use insertbefore

$('<div>hello</div>').insertBefore('.time-widget');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="time-widget">
  <select id="p_h_0_startHour_hour" name="" class="form-control select-time form-control">
    <option value="0"> 00</option>
  </select>
</div>

Append an html to parent of a div, The first step is to create the node (element) you wish to append, the next is to find where you This will return the object (whether it be a DIV, P, SPAN, etc. have a parent node, since everything should be nested inside of the HTML tag. More "Try it Yourself" examples below. The parentElement property returns the parent element of the specified element. The difference between parentElement and parentNode, is that parentElement returns null if the parent node is not an element node: In most cases, it does not matter which property you use, however, parentNode is probably the

Here is why appendChild moves a DOM node between parents , It works basically the same as appendChild() . // Create a new element var newNode = document.createElement('div'); // Get the parent node  The.append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use.prepend()). The.append() and.appendTo() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target.

Adding elements to the DOM, This read-only property returns a collection of the HTML elements this case I'm creating a <div> using createElement() , then I'm appending it  To traverse all the way up to the document's root element (to return grandparents or other ancestors), use the parents() or the parentsUntil() method. Tip: To traverse a single level down the DOM tree, or all the way down to the last descendant (to return children or other descendants), use the children() or find() method.

Adding an element to the end of a set of elements with vanilla , The append( content ) method appends content to the inside of every function (​event) { var html = "<div class='child-div'>demo text " + x++ +  The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).

Comments
  • try $('<div>hello</div>').appendTo($('#p_h_'+i+'_startHour_hour').parent());
  • It's possible to remove html added before each insertBefore. Because it's added at each call and I have a lot of hello, but the ide is to have one. Thank you
  • So you want to remove the <div>hello</div> before you run the code?
  • yes, because actually now I call this code when submit a form and if the form has errors a do this insertBefore, so if I click multiple times on submit the div with hello is added multiple timees
  • try look at example 2