I want to get the text "Example" from between these tags, but I don't know how to do it.
I thought of using a "getElementsByTagName("em")" method, but I only need this content, not all the em tags.
This is the example:
<em>
::before
Example
::after
</em>
I think what you are after is: document.getElementsByTagName("em")[1].innerHTML
This will get the text out of the <em> at position 2
by using the selector [] you tell it which element number you want by index.
<em>1</em>
<em>2</em>
<em>3</em>
<em>4</em>
using document.getElementsByTagName("em")[1].innerHTML
would return the number '2' (javascript indexes start at 0)
Alternatively, use ID's and use getElementById() instead, much easier when you know where the fish is in the barrel...
Related
Is it possible to select the content/text node of a tag using css selectors?
For example I have some content such <div><p class="x">Hello world</p></div>. How can I get/select the text node ("hello world") using CSS?
I know that I could get the p element using .x class selector and then use innerHTML with javascript but I would like to know if it's possible to get the exactly text node using CSS and just set the node data (which is basically text as the node is a text node). Is it possible?
No, it is not possible.
However, if you're trying to figure out how to select the text node with querySelector, do what #j08691 suggested:
document.querySelector('.x').textContent
That or
document.querySelector('.x').firstChild.nodeValue
should work.
Is there a way to have blank HTML tags or in other words, tags that do nothing? For example <p> turns the inclosed text into a paragraph, <b> turns the text bold, <div> creates a box. I'm looking for a tag that has no effect on the text or it's environment. I want this so that I can customise it myself with css or js.
I am <x class="FancyText">king</x> of the world.
There are no “blank HTML tags”. What come closest are span and div, but the latter causes line breaks before and after (block rendering) by default and cannot be used in inline context, and the former does not allow any block-level elements inside it.
In practice, you can use a made-up element, like <foo>...</foo>, though with some problems on older versions of IE. This is widely regarded as a bad move, though; using span or div, as appropriate, with a class attribute is recommeded.
Consider explaining what you are really trying to achieve, instead of referring to fictional HTML tags expected to do nothing.
For this you'd use either the div or span element. From the HTML5 editor's draft:
The div element has no special meaning at all. It represents its children.
The span element doesn't mean anything on its own. ... It represents its children.
The difference between them is that the div element should be used where flow content is expected (that is to say, sections on a page), whereas the span element should be used where phrasing content is expected (within text).
In the example you've given, you'd want to use the span element:
I am <span class="FancyText">king</span> of the world.
You can do the following:
<div></div>
This will do nothing unless you add a class or id.
Or,
<span>Some text</span>
This will do nothing unless you add a class or id.
if you want to use <x ...> txt </x> as a place holder,
than any officially-unused set of chars will do fine.
I use <a> ... </a> for that
In one of my divs I need to put a title with a piece of text. But the title needs to be in 3 different sizes.
Like this :
Hello, my name is Anonymous
Do any of you have an idea? Because when I use different < p > classes, it starts a new paragraph.
<span style="font-family:BLA;">Hello,</span>
<span style="font-family:BLO;">my name is</span>
<span style="font-family:BLU;">Anonymous</span>
Use appropriate markup. You don't find multiple paragraphs inside a single sentence, so it makes no sense to use a <p>. Use elements that make sense.
Look at the reason you want to change the font, and use the markup the best describes it. Are you emphasising? Quoting? Defining? Or something else? If HTML doesn't have an element that describes your meaning, then use a span (it is a semantics-free generic element).
Then apply your styles to those elements (you might want to override the default styling on the elements first).
This question already has answers here:
What are alternatives to the span-element? [duplicate]
(3 answers)
Closed 9 years ago.
Here is an example.
<span id="s1">Hello</span>
<span id="s2">world</span>
<span id="s3">this</span>
<span id="s4">is</span>
<span id="s5">a</span>
<span id="s6">sentence.</span>
Basically, I have a script that separates words of a sentence into a span. Is there a better approach of doing this? Perhaps an alternative to span that I don't know about? I thought of using something like <u> because it is short, then removing default underlining. Also <p> wont work because it is a block element.
Any ideas?
For semantics reasons, I'd advise against using other elements, unless there's some real need for you to have shorter element names. <span>s are semantically neutral elements, so they'd be ideal for this situation.
This is probably exactly what you should be doing if you really need to style each word differently. It's a meaningless tag used to group inline elements (in this case, words).
The span element .. doesn't mean anything on its own ..
The span element is the only element in HTML that has been defined as not meaning anything as such, so it is the element to be used when you wish to make e.g. a word an element in order to manipulate it, without assigning any meaning to it.
However, an a element without an href attribute is also “semantically” empty and with no default rendering rules. Some people have used <a id=foo>...</a> instead <span id=foo>...</span>. However, some programs may process such an a element in some special way (as if it were link-like anyway), and people may write style sheets in a manner that expects all a elements to be links. So such use of a is risky with no benefit beyond shortness. It also makes the source code less legible, since such use is not common.
In practice, you could, up to a point, use a custom tag, like z (with document.createElement('z') in JavaScript to make old versions of IE treat it as styleable). Browsers would treat it as unknown element, letting you handle it in scripting and (with the caveat) in CSS. But imagine what happens if some future version of HTML, or HTML as recognized by some browser, contains an element with the name you selected, with some fancy meaning and effect (like “don’t display this element” or “blink this text”).
I would agree with the answers Nightfirecat and imjared posted. <span> is probably the best element to use in this case as it denotes a neutral inline element.
However, if you really had to stretch a hack, you could try <em> since you are emphasising each word in its own way.
I'm looking for a CSS tag that can provide an id for text. I want to be able to modify the text with javascript, so i need something like:
<texttag id="the_id">the text</texttag>
All the other tags i've tried affect the formatting one way or another. For example it would be used in a sentence, such as:
You live in <texttag id="town_id">Newmarket</texttag>. Thats a nice town.
And it would display as:
You live in Newmarket. Thats a nice town.
But I would have the ability to modify Newmarket with the id town_id ..
See what i mean? If I use <p> or <div> the text wraps..
The <span> HTML tag has a display of inline and has no presentational nor semantic meaning attached to it. You can use CSS to apply whatever styles you'd like or script to modify the element's contents.
This sentence has <span id="whatever">text</span>.
To change contents:
docuent.getElementById('whatever').innerHTML('changed text');
To style that specific element:
#whatever { font-weight:bold; }
Also, you may want to read about the difference between block and inline elements. (And an expanded explanation here.) (<p> and <div> are block; <span> is inline.)