Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Comments on What problem does innerHTML solves?

Post

What problem does innerHTML solves?

+2
−5

I understand that innerHTML does all the following actions:

  • It makes the element we work on (or even the entire DOM tree that we work on if that element is <body>) to be copy-pasted into a new empty document
  • The new document to which the data was copied, naturally lacks any JavaScript of the previous document
  • Although the data was copied into a new document, the browser will present the HTML change as if it was done in the original document

What problem would this property solve that can't be done with other methods, besides perhaps emptying the current document (why doing that?) and outputting the full HTML of an element (is it really the only way?)

About the MDN documentation:

  • Replacing the contents of an element: innerHTML does at least one extra thing as defuncting JavaScript so I would assume it's not a mere value replacement
  • Appending HTML to an element: I assume that this would typically be done with insertAdjacentHTML()?
History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.
Why should this post be closed?

3 comment threads

Can you provide an example of a change other than a replacement that supports your assumption? (5 comments)
`textContent` (like it's name implies) only does text (3 comments)
Documentation (2 comments)
Can you provide an example of a change other than a replacement that supports your assumption?
elgonzo‭ wrote about 3 years ago · edited about 3 years ago

You wrote I assume that the original author meant "changing" not replacing. Can you provide an example of using innerHtml that represents a change that is not a replacement? innerHtml is a property whose value -- a DOMString/String [*] -- can (aside from get) only be set. Setting a property is assigning a new value to it, which is akin to replacing the current value with with a new value. Thus, i am really curious about what the foundations of your assumption are... ([*] in JavaScript, strings are immutable)

hkotsubo‭ wrote about 3 years ago

Complementing the comment above, when you set the value of something, you're replacing the old value by the new one, which is the same as changing the value. To me, both words can be used interchangeably - unless there's a special use case where they can differ (in the that case, could you provide that?)

deleted user wrote about 3 years ago

I think I can't provide that if we treat any change in the entire DOM (may it be for just one character) as a value change with the DOM as a whole (whatever comprises it) being a value of the document; due to your comments I have changed that phrasing.

elgonzo‭ wrote about 3 years ago · edited about 3 years ago

deleted user, you seem to be confused. You cannot make a change to an existing DOM of an element through the element's innerHtml property other than replacing it. Note that innerHtml is a property of type DOMString. A DOMString is basically a string, not the/a DOM. If you get or set the innerHtml property, you are dealing with a string, not with a DOM. As such, talking about changing only some aspect of a element's DOM in the context of innerHtml is confusing and incorrect. All the innerHtml property allows is assigning a new string (DOMString) to it, which will result in the element receiving a new node tree (DOM, if you will) that is being created as a result of parsing the string. Read the documentation you linked to in your Q. It explains explicitly and clearly what is going on with innerHtml. It is not confusing, either. The probably only thing that makes it confusing for you is you making unfounded assumptions instead of just sticking with what the documentation tells you.

deleted user wrote about 3 years ago

elgonzo‭ I seem to you to be "confused", okay, but I am not, I just had one or more mistakes, heavy down voting doesn't help and commenting about anything which isn't the mistake/s doesn't help, this why I can't focus on the actual help you seem to me to try to give; as I have said in another comment, I find the linked documentation page confusing and have hard time reading it.

Skipping 1 deleted comment.