How to Implement Prepend and Append with Regular JavaScript

How can I implement prepend and append with regular JavaScript?

Perhaps you're asking about the DOM methods appendChild and insertBefore.

parentNode.insertBefore(newChild, refChild)

Inserts the node newChild as a child of parentNode before the
existing child node refChild. (Returns newChild.)

If refChild is null, newChild is added at the end of the list of
children. Equivalently, and more readably, use
parentNode.appendChild(newChild).

Prepend and append content based on browser size

There are a few things that you can do to optimize this.

A first option is to only execute your moveDealsImage function when the state changes from mobile to desktop or reverse. All the other resizes can just be ignored.

This can be accomplished by using something like following code:

var mobile_width = 640;
var is_mobile = (window.innerWidth <= mobile_width);
function moveDealsImage(e) {

    // Only execute the function when then state changes from mobile to desktop or reverse
    if( 
        ! is_mobile && window.innerWidth > mobile_width || 
        is_mobile && window.innerWidth <= mobile_width 
    )
        return;

    // Update state
    is_mobile = (window.innerWidth <= mobile_width);

    console.log('your code here');
}
window.addEventListener("resize", moveDealsImage);
moveDealsImage();

Another and better solution would be to use CSS media queries. This can be done with the following CSS and HTML.

.desktop-deals-header {
   display: block;
}
.mobile-deals-header {
   display: none;
}

@media only screen 
and (max-width : 640px) {
   .desktop-deals-header {
      display: none;
   }
   .mobile-deals-header {
      display: block
   }
}

and in your HTML you add two headers, one for desktop and one for mobile.

<div class="mobile-deals-header">Mobile header</div>
<div class="desktop-deals-header">Desktop header</div>

How to force .prepend() and .append() to add DOM objects, not text

.get returns a HTMLElement. That is why, its appending string.

If you wish to select first element, you should use :first selector.

$parentpanel = $this.parents(".designer-panel:first");

$(function() {
  var startpos,    selected = $([]),    offset = {      top: 0,      left: 0    };
  $('#designer-detail-addband').on('click', function() {    var $this = $(this),      $parentpanel = $this.parents(".designer-panel:first");
    $parentpanel.prepend('<div class="panel designer-panel">' +      '<div class="panel-body designer-panel-body" style="height:1px">' +      '</div>' +      '<div class="bg-warning">' +      '<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +      '</i> Group heade {0}: <span id="band{0}_expr" contenteditable="true">"groupexpression"</span>' +      '</div></div></div>');
    $parentpanel.append('<div class="panel designer-panel">' +      '<div class="panel-body designer-panel-body" style="height:1px"></div>' +      '<div class="bg-warning">' +      '<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +      '</i> Group footer {0}' +      '</div></div></div>');
  });
  $(".designer-panel-body").droppable({    accept: ".designer-field"  });
  $(".designer-field").draggable({    start: function(event, ui) {      var $this = $(this);      if ($this.hasClass("ui-selected")) {        selected = $(".ui-selected").each(function() {          var el = $(this);          el.data("offset", el.offset());        });      } else {        selected = $([]);        $(".designer-field").removeClass("ui-selected");      }      offset = $this.offset();    },
    drag: function(event, ui) {      // drag all selected elements simultaneously      var dt = ui.position.top - offset.top,        dl = ui.position.left - offset.left;      selected.not(this).each(function() {        var $this = $(this);        var elOffset = $this.data("offset");        $this.css({          top: elOffset.top + dt,          left: elOffset.left + dl        });      });    }  });
  $(".panel-resizable").resizable({    minWidth: "100%",    maxWidth: "100%",    minHeight: 1  });})

.panel-resizable {  min-height: 1px;  overflow: hidden;  margin: 0;  padding: 0;}.designer-field {  border: 1px solid lightgray;  white-space: pre;  overflow: hidden;  position: absolute;}.designer-panel-body {  min-height: 1px;  overflow: hidden;  margin: 0;  padding: 0;}.panel-footer {  padding: 0;}.designer-panel,.panel-body {  margin: 0;  padding: 0;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"><script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script></head>
<body>  <div class='panel designer-panel'>    <div class='panel-body designer-panel-body panel-resizable' style='height:2cm'>
      <div class='designer-field' style='left:5px;top:6px;width:180px'>field 1 in group 1 header</div>
      <div class='designer-field' style='left:54px;top :36px;width:160px'>field 2 in group 1 header</div>    </div>
    <div class='panel-footer'>Group 1 Header</div>  </div>
  <div class='panel designer-panel'>    <div class='panel-body panel-resizable' style='height:1cm'>      <div class='designer-field' style='left:24px;top:2px;width:140px'>field in detail group</div>    </div>    <div class='panel-footer panel-primary'>Detail <a role="button" id="designer-detail-addband"> Add group</a>    </div>  </div>
  <div class='panel'>    <div class='panel-body panel-resizable' style='height:1cm'>
      <div class='designer-field' style='left:44px;top:2px;width:140px'>field in group 1 footer</div>    </div>    <div class='panel-footer panel-warning'>Group 1 Footer</div>  </div>

Prepending constructed variable to HTML in JS

firstly, as @madalin ivascu says, prepend is a jQuery function, not comes from DOM methods.

if you want use jQuery, it does a convenient way, you need "import/require/include" jQuery first. like:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

then, you can use this:

$('#displayPrevRounds').prepend(toAppend);

note that, no '', it's a var not chr.

if you want use DOM methods anyway, you can...
actually, i found you question via Google:"document html prepend",

use DOM Method:

parentNode.insertBefore(newChild, refChild);

How can I implement prepend and append with regular JavaScript?

and, here:

Append and Prepend without JQuery?

How to append or prepend div text to be used several times on one page without repeating?

try this if i am not wrong in understanding your question

$('.description h3').each(function () {
$(this).prependTo($(this).closest('.caption').find(".title"));

this code will work if description is part of caption. your markup is not clear

and if it is not part of caption then try this

$('.description h3').each(function () {
    $(this).prependTo($(this).closest('.description').siblings(".title"));

Append element in tag right before contents with Javascript

.insertBefore, and .firstChild

You could insert your new input element before the first child of each anchor:

// Gather up a reference to all anchors
var anchors = document.getElementsByTagName("a"), inputEl;
// Cycle over all of them
for ( var i = 0; i < anchors.length; i++ ) {
  // Create a new input field
  inputEl = document.createElement("input");
  // Insert it before the first child of the anchor
  anchors[i].insertBefore( inputEl, anchors[i].firstChild );
}

Demo: http://jsbin.com/ibugul/edit#javascript,html

Regular Expression

Or you could use the replace method:

var a = document.getElementsByTagName("a"), 
    c = a.length;

while ( c-- ) {
  a[c].innerHTML = a[c].innerHTML.replace( /(.*)/, function( s, c2 ){
    return "<input />" + c2;
  }); 
}

Modify .innerHTML

var a = document.getElementsByTagName("a"), 
    c = a.length;

while ( c-- ) a[c].innerHTML = "<input />" + a[c].innerHTML;

jQuery

If you're already using jQuery on your site, you could use that to make this even shorter:

$("a").prepend("<input />");

Note, it is not worth including the library just for this.

How to append and prepend text to a matched substring using regex

Using regex substitution:

$S =~ s!\b(net insider\b.*?)( Rupees)!<p class="Green">$1</p>$2!;

Gives:

<p class="Green">net insider gain of xyz</p> Rupees

---

Related Topics