Wrapping a Set of Dom Elements Using JavaScript

Wrapping a set of DOM elements using JavaScript

You can do like this:

// create the container div
var dv = document.createElement('div');
// get all divs
var divs = document.getElementsByTagName('div');
// get the body element
var body = document.getElementsByTagName('body')[0];

// apply class to container div
dv.setAttribute('class', 'container');

// find out all those divs having class C
for(var i = 0; i < divs.length; i++)
{
   if (divs[i].getAttribute('class') === 'C')
   {
      // put the divs having class C inside container div
      dv.appendChild(divs[i]);
   }
}

// finally append the container div to body
body.appendChild(dv);

Wrapping a DOM element inside a JavaScript object

You might be interested in Dojo's widget library, Dijit - if I'm understanding your question correctly, it essentially does what you're asking, and a whole lot more.

In Dijit, a widget essentially encapsulates a DOM node, its contents, any JavaScript that defines its behavior, and (imported separately) CSS to style its appearance.

Widgets have their own lifecycle, registry, and events (including many which simply map to DOM events on a node within the widget, e.g. myWidget.onClick could effectively call myWidget.domNode.onclick).

Widgets can (but don't have to) have their initial contents defined in a separate HTML template file, through which it's also possible to bind events on nodes within the template to widget methods, as well as set properties on the widget that reference particular nodes in the template.

I'm barely scratching the surface here. If you want to read more on this, you can start with these reference pages:

• http://dojotoolkit.org/reference-guide/dijit/info.html
• http://dojotoolkit.org/reference-guide/dijit/_Widget.html (the base that all widgets extend)
• http://dojotoolkit.org/reference-guide/dijit/_Templated.html (RE the HTML templating)
• http://dojotoolkit.org/reference-guide/quickstart/writingWidgets.html (useful information when starting to write your own widgets)
• http://dojotoolkit.org/reference-guide/dijit/ (for a bunch more info)

All said, I don't know what you're ultimately aiming for, and maybe this is all a bit much for your purposes (considering I'm throwing an entire other library at you), but figured it might pique your interest at least.

Pure javascript method to wrap content in a div

If your "slide"s are always in slidesContainer you could do this

org_html = document.getElementById("slidesContainer").innerHTML;
new_html = "<div id='slidesInner'>" + org_html + "</div>";
document.getElementById("slidesContainer").innerHTML = new_html;

How to wrap a element to new element one created

You don't append link itself to body.

Edit: Changed code to replace element instead of append, it wasn't what you wanted. And it doesn't work with link because it can't wrap input. check here

function moveToLink(){
    var button = document.getElementById('button');
    var div = document.createElement('div');
    document.getElementsByClassName('parent')[0].replaceChild(div, button);
    div.appendChild( button);
}

Pure JS, groups of 3 wrap in rows and inser into DOM

You are selecting the block elements from the DOM, but they don't aren't appended to the DOM yet, so that will always come up empty.

const blocks = [...document.querySelectorAll('track__blocks')]

It might be easier to add your figure and img elements in the first loop when creating the rows and blocks. Add a second loop, like you do in the end of your code, and add the figures and images to each block when you create them.

for (let team of groupedTeams) {
  const row = document.createElement('div')
  row.classList.add('track')

  const block = document.createElement('div')
  block.classList.add('track__block')

  for (let item of team) {
    const figure = document.createElement('figure')
    figure.className = 'track track__block grid grid--team__track__block'

    const image = new Image()
    image.className = 'image image--lazy image--w320 track__block grid--team__track__block--image'
    image.src = item

    figure.append(image)
    block.append(figure)
  }

  container.appendChild(row)
  row.appendChild(block)
}

How to wrap slotted elements individually

I would recommend that you change your approach as to the wrapping of the children. The simplest way would be to just add the missing HTML as a child of the slotted div like the example below. You would still be able to style the slotted element with the ::slotted pseudo selector.

customElements.define('custom-element', class MyCustomElement extends HTMLElement {

  constructor(...args) {
    super(...args);

    let shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        ::slotted([slot="item"]) {
            border: 1px solid black;
            padding: 15px;
        }
      </style>
      <slot name="item"></slot>
    `;

  }
});

<custom-element>
  <div slot="item">
    <div class="wrap">item 1</div>
  </div>
  <div slot="item">
    <div class="wrap">item 2</div>
  </div>
</custom-element>

How do I put an existing text fragment inside a newly-created element node?

Doing this with vanilla DOM APIs is a little involved, but not too hard. You will need to locate the DOM text node which contains the fragment you want to replace, split it into three parts, then replace the middle part with the node you want.

If you have a text node textNode and want to replace the text spanning from index i to index j with a node computed by replacer, you can use this function:

function spliceTextNode(textNode, i, j, replacer) {
    const parent = textNode.parentNode;
    const after = textNode.splitText(j);
    const middle = i ? textNode.splitText(i) : textNode;
    middle.remove();
    parent.insertBefore(replacer(middle), after);
}

Adapting your example, you will have to use it something like this:

function spliceTextNode(textNode, i, j, replacer) {
    const parent = textNode.parentNode;
    const after = textNode.splitText(j);
    const middle = i ? textNode.splitText(i) : textNode;
    middle.remove();
    parent.insertBefore(replacer(middle), after);
}

document.getElementById('inject').addEventListener('click', () => {
    // XXX: locating the appropriate text node may vary
    const textNode = document.querySelector('div.sign').firstChild;

    const m = /\w+/.exec(textNode.data);
    spliceTextNode(textNode, m.index, m.index + m[0].length, node => {
        const a = document.createElement('a');
        a.itemprop = 'creator';
        a.href = 'https://example.com/';
        a.title = "The hottest examples on the Web!";
        a.appendChild(node);
        return a;
    })
}, false);

/* this is to demonstrate other nodes underneath the <div> are untouched */
document.querySelector('.info').addEventListener('click', (ev) => {
    ev.preventDefault();
    alert('hello');
}, false);

<div class="sign">@username: haha, <a href="http://example.org" class="info">click me too</a></div>

<p> <button id="inject">inject link</button>

---

Related Topics