document.createElement und anschließendes find

[goto;]

Hallo zusammen,

ich möchte einen HTML-String in ein DOM-Element umwandeln und anschließend nach einem Element innerhalb dieses neuen Elements suchen:

export default class Modal extends React.Component {
   
    [...]
   
    onContentChange = (htmlString) => {
        let dom = document.createElement('div');
        dom.innerHTML = htmlString;

        this.detectElement(dom);
    };

    detectElement = (dom) => {
        let element = dom.getElementById('top-crosssell-side');

        console.log(element); // null
    };
   
    [...]
}

Die Funktion "onContentChange" erhält als Parameter das plain html. In der Funktion detectElement soll dann ein entsprechendes Element gesucht/gefunden werden, allerdings werde ich mit der Meldung "getElementById is not a function" vertröstet. Was mache ich falsch?

Viele Grüße

 

[ComFreek]

createElement fügt das Element noch nicht in den DOM ein. Du musst irgendwo appendChild o. Ä. aufrufen.

@Sempervivum unten hat recht! Eventuell möchtest du aber trotzdem das DOM-Element irgendwann mal einfügen

 

[Sempervivum]

getElementById gibt es nur für document. Willst Du in einem beliebigen DOM-Element etwas suchen, kannst Du querySelector verwenden:

    <script>
        onContentChange = (htmlString) => {
            let dom = document.createElement('div');
            dom.innerHTML = htmlString;

            detectElement(dom);
        };

        detectElement = (dom) => {
            // let element = dom.getElementById('top-crosssell-side');
            let element = dom.querySelector('#top-crosssell-side');

            console.log(element);
        };
        let thehtml = '<div><span id="top-crosssell-side"></span></div>';
        onContentChange(thehtml);
    </script>