Asked  6 Months ago    Answers:  5   Viewed   33 times

What is the difference between innerHTML, innerText and value in JavaScript?

 Answers

48

Unlike innerText, though, innerHTML lets you work with HTML rich text and doesn't automatically encode and decode text. In other words, innerText retrieves and sets the content of the tag as plain text, whereas innerHTML retrieves and sets the content in HTML format.

Tuesday, June 1, 2021
 
jwegner
answered 6 Months ago
69

Your current method fails, because HTML properties are not defined for the given XML document. If you supply the text/html MIME-type, the method should work.

var string = '<!DOCTYPE html><html><head></head><body>content</body></html>';
var doc = new DOMParser().parseFromString(string, 'text/html');
doc.body.innerHTML; // or doc.querySelector('body').innerHTML
// ^ Returns "content"

The code below enables the text/html MIME-type for browsers which do not natively support it yet. Is retrieved from the Mozilla Developer Network:

/* 
 * DOMParser HTML extension 
 * 2012-02-02 
 * 
 * By Eli Grey, http://eligrey.com 
 * Public domain. 
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. 
 */  

/*! @source https://gist.github.com/1129031 */  
/*global document, DOMParser*/  

(function(DOMParser) {  
    "use strict";  
    var DOMParser_proto = DOMParser.prototype  
      , real_parseFromString = DOMParser_proto.parseFromString;

    // Firefox/Opera/IE throw errors on unsupported types  
    try {  
        // WebKit returns null on unsupported types  
        if ((new DOMParser).parseFromString("", "text/html")) {  
            // text/html parsing is natively supported  
            return;  
        }  
    } catch (ex) {}  

    DOMParser_proto.parseFromString = function(markup, type) {  
        if (/^s*text/htmls*(?:;|$)/i.test(type)) {  
            var doc = document.implementation.createHTMLDocument("")
              , doc_elt = doc.documentElement
              , first_elt;

            doc_elt.innerHTML = markup;
            first_elt = doc_elt.firstElementChild;

            if (doc_elt.childElementCount === 1
                && first_elt.localName.toLowerCase() === "html") {  
                doc.replaceChild(first_elt, doc_elt);  
            }  

            return doc;  
        } else {  
            return real_parseFromString.apply(this, arguments);  
        }  
    };  
}(DOMParser));
Wednesday, June 9, 2021
 
van_folmert
answered 6 Months ago
26

Starting from androidx source files, I've migrated custom classes based on old DialogPreference to new androidx.preference.DialogPreference with the following procedure:

Step 1

The old custom dialog class (e.g. CustomDialogPreference) based on legacy DialogPreference should be split into two separate classes:

  1. One class (e.g. CustomPreference) should extend androidx.preference.DialogPreference and will contain only the code related to preference handling (data management).
  2. Another class (e.g. CustomDialog) should extend androidx.preference.PreferenceDialogFragmentCompat and will contain only the code related to dialog handling (user interface), including onDialogClosed. This class should expose a static method newInstance to return an instance of this class.

Step 2

In the main fragment handling preferences based on PreferenceFragmentCompat the onDisplayPreferenceDialog method should be overridden to show the custom dialog, e.g.:

    private static final String DIALOG_FRAGMENT_TAG = "CustomPreference";

    @Override
    public void onDisplayPreferenceDialog(Preference preference) {
        if (getParentFragmentManager().findFragmentByTag(DIALOG_FRAGMENT_TAG) != null) {
            return;
        }

        if (preference instanceof CustomPreference) {
            final DialogFragment f = CustomDialog.newInstance(preference.getKey());
            f.setTargetFragment(this, 0);
            f.show(getParentFragmentManager(), DIALOG_FRAGMENT_TAG);
        } else {
            super.onDisplayPreferenceDialog(preference);
        }
    }
Monday, August 2, 2021
 
commonpike
answered 4 Months ago
19

The major difference between the two (other than add()'s String-only support) is that put() overwrites the previous presence of param with an existing key while add() does not.

For example:

params.put("etc", "etc");
params.put("key", "abc");
params.put("key", "xyz");

// Params: etc=etc&key=xyz

While add creates two params with the same key:

params.add("etc", "etc");
params.add("key", "abc");
params.add("key", "xyz");

// Params: etc=etc&key=abc&key=xyz

But what is the importance of doing this?

In the above example, the web-server would only read the last value of key i.e. xyz and not abc but this is useful when POSTing arrays:

params.add("key[]", "a");
params.add("key[]", "b");
params.add("key[]", "c");

// Params: key[]=a&key[]=b&key[]=c
// The server will read it as: "key" => ["a", "b", "c"]
Monday, August 23, 2021
 
jakubos
answered 4 Months ago
76

It seems that the following piece of code works great:

var doc = document.implementation.createHTMLDocument("");
doc.documentElement.innerHTML = htmlBody;
var text = $(doc).find('#theElementToFind').text();

external resources aren't loaded, scripts aren't being evaluated.

Found it here: https://stackoverflow.com/a/9251106/95624

Origin: https://developer.mozilla.org/en/DOMParser#DOMParser_HTML_extension_for_other_browsers

Saturday, October 16, 2021
 
Xel
answered 2 Months ago
Xel
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share