dom-manipulation - w3toppers.com

Where does DOM manipulation belong in Angular 2?

Based upon recommend solution by developers: http://angularjs.blogspot.de/2016/04/5-rookie-mistakes-to-avoid-with-angular.html @Component({ selector: ‘my-comp’, template: ` <div #myContainer> </div> ` }) export class MyComp implements AfterViewInit { @ViewChild(‘myContainer’) container: ElementRef; constructor() {} ngAfterViewInit() { var container = this.container.nativeElement; console.log(container.width); // or whatever } } Attention: The view child name has to begin with myName and in the template you … Read more

How can I remove wrapper (parent element) without removing the child?

Pure JS (ES2015) solution, in my opinion easier to read than jQuery-solutions. node.replaceWith(…node.childNodes) Node has to be an ElementNode const wrapperNode = document.querySelector(‘h1’) wrapperNode.replaceWith(…wrapperNode.childNodes) <h1> <a>1</a> <b>2</b> <em>3</em> </h1>

Is there a way to get innerText of only the top element (and ignore the child element’s innerText)?

Just iterate over the child nodes and concatenate text nodes: var el = document.getElementById(“your_element_id”), child = el.firstChild, texts = []; while (child) { if (child.nodeType == 3) { texts.push(child.data); } child = child.nextSibling; } var text = texts.join(“”);

How to move all HTML element children to another parent using JavaScript?

Basically, you want to loop through each direct descendent of the old-parent node, and move it to the new parent. Any children of a direct descendent will get moved with it. var newParent = document.getElementById(‘new-parent’); var oldParent = document.getElementById(‘old-parent’); function move() { while (oldParent.childNodes.length > 0) { newParent.appendChild(oldParent.childNodes[0]); } } #old-parent { background-color: red; } … Read more

jQuery : remove element except inside element

jQuery has an unwrap() method which removes the parent node and leaves the matched element in place: $(“.gallery”).contents().filter(“.thumbnail”).unwrap(); // or (faster) $(“.gallery .thumbnail”).unwrap(); http://api.jquery.com/unwrap/

Auto resizing the SELECT element according to selected OPTION’s width

You are right there is no easy or built-in way to get the size of a particular select option. Here is a JsFiddle that does what you want. It is okay with the latest versions of Chrome, Firefox, IE, Opera and Safari. I have added a hidden select #width_tmp_select to compute the width of the … Read more

What is innerHTML on input elements?

Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements. value applies only to objects that have the value attribute (normally, form controls). innerHtml applies to every object that can contain HTML (divs, spans, but many other and also form controls). They are not equivalent … Read more

filters on ng-model in an input

I believe that the intention of AngularJS inputs and the ngModel direcive is that invalid input should never end up in the model. The model should always be valid. The problem with having invalid model is that we might have watchers that fire and take (inappropriate) actions based on invalid model. As I see it, … Read more

How to add a class to a given element?

If you’re only targeting modern browsers: Use element.classList.add to add a class: element.classList.add(“my-class”); And element.classList.remove to remove a class: element.classList.remove(“my-class”); If you need to support Internet Explorer 9 or lower: Add a space plus the name of your new class to the className property of the element. First, put an id on the element so … Read more