How to insert a text-like element into document using javascript and CSS?


Tags: javascript,css

Problem :

I want to use javascript to insert some elements into the current page. Such as this is the original document: <p>Hello world!</p>

Now I want to insert an element in to the text so that it will become:

<p>Hello <span id=span1>new</span> world!</p>

I need the span tag because I want to handle it later.Show or hide. But now problem comes out, if the original page has already defined a strange CSS style on all <span> tags, the "new" I just inserted will not appear to be the same as "Hello" and "world". How can I avoid this? I want the "new" be exactly the same as the "Hello" and "world".



Solution :

Simply override any span styles. Set layout properties back to browser defaults and set formating to inherit from the parent:

span#yourSpan {
  /* defaults */
  position: static;
  display: inline;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;

  /* inherit from parent node */
  font: inherit;
  color: inherit;
  text-decoration: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: inherit;
  word-spacing: inherit;
}

This should be sufficient, although you may need to add !important if you are not using an id:

<span class="hello-node">hello</span>

span.hello-node {
  /* defaults */
  position: static !important;
  display: inline !important;
  ...
}

    CSS Howto..

    HTML/CSS How to format Text and have an Image floating next to it

    How to remove unwanted whitespace css/html

    How to get correct overflow for proper div with fixed footer?

    How to use text-overflow properly to format text?

    How to apply multiple CSS3 rotation transformations (compounded) without javascript?

    How to align items of a list CSS/jquery

    Using jQuery toggle to show content, but prevent closing when the user clicks on an input element

    Div doesn´t show background color after float:left

    Avoid children to interfer with the parents hover. (or how to .stop(false,true) a css transition)

    HTML element positioning - How do I have an element always stay in the visible area without javascript

    CSS / JS: How do I tell my page to be completely unselectable, except for stuff inside a div?

    How to add non-literal into a variable like jQuery?

    How can the css dottled border be implemented?

    How To Make Entire 'li' Area and Text A Clickable Link

    How to add a border around a canvas?

    How to create reusable Durandal widgets

    How to Slide or Move this Set of Divs

    how to desaturate background image of a div using css?

    How do I override * asterisk for css?

    How to set margin left and right to the center div when using float:left

    How to use icon fonts

    How to get angled corner like this in CSS, it's not round?

    How to change CSS id property depending upon screen size

    How to display text over responsive image by css

    Behavior/Styling Separation - How to use IDs, classes and custom attributes for CSS and JavaScript?

    how to position heading in the center of the page

    How to pull css attributes from

    Style
  • element with CSS background, to show only a part of images
  • How to explain CSS clear property? [duplicate]

    How to locate and use fonts in Qt for Embedded Linux?