Question 44663 in Html Question posted in
Some basic documentation can be found here.

Missing Spaces When Inserted Element is Rendered in DOM – Html

I’m getting some really strange behavior from a Third-Party vendor’s platform. I have HTML content in the form of a string and I’m trying to replace an HTML element or Node (don’t really care which) in the DOM with an HTML element created from that string. Either way I do it, the content of the element/node changes AFTER I put it into the DOM. It’s small stuff, like missing spaces (regular and non-breaking). As a matter of fact, it might exclusively be missing spaces…

Below I’ve included a sample of of what I’m trying to put into the DOM and what I’m getting out as a result.

Before Insertion:

<span style="font-size: 12px;">Si tiene alguna pregunta sobre la información provista, llame a <strong>la sala de partos</strong>, al teléfono <strong><span style="color: rgb(149, 55, 52);">(650) 723-5403</span></strong>.</span>

Once In DOM:

<span style="font-size: 12px;">Si tiene alguna pregunta sobre la información provista, llame a<strong>la sala de partos</strong>, al teléfono<strong><span style="color: rgb(149, 55, 52);">(650) 723-5403</span></strong>.</span>

If you look closely, there is a missing space before each STRONG tag. It also seems to be removing spaces after STRONG tags (not included in the example provided above). I don’t get it! It’s happening in Chrome, Edge, and Firefox. Does it have something to do with how I’m turning and HTML string into an HTML element? But that’s the thing, the HTML element (or Node) includes the spaces prior to insertion into the DOM, but not after.

I’m a hair’s breadth (hare’s breath?) from adding CSS margins to all of the STRONG tags, but I’d prefer to do things "the right way" if at all possible. Does anyone have any idea where my missing spaces have gone?

I’ve tried setting the outerHTML of the target element equal to the htmlText. I’ve tried instantiating the htmlText and then doing a replaceChild in the target’s parent. I’ve even tried creating a wrapper, instantiating htmlText and then replacing the target’s innerHTML with the innerHTML of the instantiated element.

target.outerHTML = htmlText;

let wrapper = document.createElement("DIV");
wrapper.innerHTML = htmlText;
let newElement = wrapper.firstChild;
target.parentNode.replaceChild(newElement,target);

let wrapper = document.createElement("DIV");
wrapper.innerHTML = htmlText;
target.innerHTML = wrapper.firstChild.innerHTML; 
target.classList.remove("triggerAttribute");

Same result every time, missing spaces, both breaking and non-breaking, usually (perhaps always?) before or after a STRONG tag.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Barmar is correct, there must be something else, in some other function, that's stripping out the spaces. Until I find that, this is what works :-(

    let contentID = target.getAttribute('data-ijcontent');

    window[contentID] = { text:htmlText, element:target }

    setTimeout(function(){window[contentID].element.outerHTML = window[contentID].text;delete window[contentID];},1)


  2. 0

    It’s hard to reproduce from the description only, but I had a similar issue the other day regarding <a>-tags inside a <span>. When placed inside the <span>, the whitespace before and after the <a>-tags were gone.
    When I inspected the element, I noticed the style was set to display: inline-flex;

    I changed the spans style to display: inline-block; and that solved the whole issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search