Difference between InnerHTML and Nodes? [closed]

Question

Difference between InnerHTML and Nodes? [closed]

Navigation

#1 by (1 votes)

0

I need help since I do not know if to use innerhtml or nodes to change, add or remove html elements, I do not find the difference of it beyond the syntax that each one requires, and if they are the same, I should use the most " easy "in terms of syntax?

javascript html

asked by Pachi 19.12.2017 в 04:59

source

1 answer

How do I send two parameters via url? php Select Rand () between From GroupBy and with OrderBy

score 1 · Answer 1

element.innerHTML

The Element.innerHTML property changes or returns the HTML syntax describing the descendants of the element.

Syntax

const content = element.innerHTML;

After the call, content contains the serialized HTML code describing all descendants of element.

element.innerHTML = content;

Remove all descendants of element, analyze the content string and assign the resulting nodes as descendants of element.

Example:

html

<body>
 <div id="txt">
  <p>primer parrafo hijo de div id="txt"</p>
  <p>segundo parrafo hijo de id="txt" txt</p>
 </div>
</body>

js

 txt = document.getElementById("txt");
 console.log(txt.innerHTML);
 /*
 La siguiente cadena (string) se muestra en la ventana de la consola:
 <p>primer parrafo hijo de div id="txt"</p> 
 <p>segundo parrafo hijo de id="txt" txt</p>
  */

Functional example

txt = document.getElementById("txt");
console.log(txt.innerHTML);

<div id="txt">
      <p>primer parrafo hijo de div id="txt"</p>
      <p>segundo parrafo hijo de id="txt" txt</p>
     </div>

Node

A Node is an interface inherited by several types of DOM , and allows these various types to be treated (or tested) in a similar way.

>

The following interfaces all inherit from Nodesus methods and properties: Document, Element, CharacterData (which Text, Comment and CDATASectionhereda), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference

These interfaces can return null in particular cases where the methods and properties are not relevant. They can throw an exception, for example, by adding children to a node type for which there can be no children.

Properties

Inherits properties from their padresEventTarget

Node.baseURI Read only

Returns to which DOMStringrepresents the base URL. The base URL concept changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the structure of the directory, that's all until the last one '/'.

Node.baseURIObject This api has not been standardized

(Not available for web content.) The nsIURI read-only object that represents the URI base for the element.

Node.childNodes Read only

Returns a live that NodeList contains all the children of this node. NodeList being alive means that if the children of Node change, the NodeList object is automatically updated.

Node.firstChild Read only

Returns that Node represents the first direct child node of the node, or null if the node does not have a child.

Node.lastChild Read only

Returns that Node represents the last node direct son of the node, or null if the node does not have a child.

Node.nextSibling Read only

Returns that Node represents the next node in the tree, or null if there is no such node.

Node.nodeName Read Only Returns a DOMString containing the name of Node . The structure of the name will differ with the type of name. For example, An HTMLElement will contain the name of the corresponding tag, like 'audio'for an HTMLAudioElement , a Text node will have the' # text'chain or a Document node will have the '# document'chain .

Full Documentation

Links: