This question already has answers here:
Get selected element's outer HTML
(30 answers)
Closed 4 years ago.
I do not have much experience with jQuery and I think this is very minor issue. I am trying to get html of an element including its self. But it is returning only internal content of selected element.
For example I have implemented this on litag but I am able to get its internal content only with this. How I can get complete html
For example this is my html
<li class="selected_li"> <span> some text </span> </li>
and this is jQuery
jQuery(".selected_li").html();
So it is returning only span and its text but I want to get complete html which is
<li class="selected_li"> <span> some text </span> </li>
How I can get this. Is there a different jQuery function to get this?
You can get it using outerHTML
console.log($(".selected_li")[0].outerHTML)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="selected_li"> <span> some text </span> </li>
</ul>
Related
This question already has answers here:
Find and replace specific text characters across a document with JS
(14 answers)
Closed 11 months ago.
<a href="/knowledgebase/category/community?language=tr" class="Category-Item">
<h4><span><i class="fas fa-comments"></i></span> Community</h4>
<p></p>
<span class="MoreArticles">8 Makaleler</span>
</a>
I want find and replace text under a class.
For example; Finding "Community" text and change to "Topluluk".
I writed a javascript language and i need do this for non-multilangual application.
Before:
<a href="blabla" class="**Category-Item**"><i class="blabla">Community</i>
After:
<a href="blabla" class="**Category-Item**"><i class="blabla">Topluluk</i>
from what i understood , you can select the element then change the inner text. if that's not what you ment please leave a comment.
let text = document.querySelector('h4');
text.innerText = "changed";
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I have a list of HTML article tags that are dynamically generated. Some of the article tags have a class named "featured". I want to insert some HTML right before the closing article tag where the class is named "featured" using plain javascript.
<article class="list-item featured">
....
</article>
<article class="list-item">
....
</article>
<article class="list-item featured">
....
</article>
<article class="list-item">
....
</article>
I tried using something like, but it did not work. I got an error: featuredItem.insertAdjacentHTML is not a function. What syntax should I be using to do this?
var featuredItem = document.getElementsByClassName("featured");
featuredItem.insertAdjacentHTML('beforeend','<div class="ribbon-featured"></div>');
getElementsByClassName returns an array-like object containing 0 or more elements. You can't invoke insertAdjacentHTML on the set of returned elements, you need to pick one element from the set to manipulate its content.
getElementsByClassName returns an array-like object, so you can forEach through each array object with the featured class name as such:
document.getElementsByClassName("featured").forEach(featuredItem => {
featuredItem.insertAdjacentHTML('beforeend','<div class="ribbon-featured"></div>')
})
I am using Zendesk Help Center but customizing it with JS so apologies if that makes this more difficult.
I have many (~2000) articles which begin with "KCS - " (for instance, KCS - How to Issue a Bill). I now want to remove that "KCS - " from all of the article titles. I successfully used the following code to remove the "KCS - " from those titles:
$('h1').each(function() {
var text = $(this).text();
$(this).text(text.replace('KCS - ', ''));
This works for the articles themselves, but the "KCS - " still appears in search results. I tried the following code to deal with that:
$('li').addClass('search-result').each(function() {
var text = $(this).text();
$(this).text(text.replace('KCS - ',''));
This does remove the "KCS - " but it also removed and tags and results in plain text instead of links appearing in the search results.
I've attached screenshots of the search result code before and after trying to remove the "KCS - ". If anyone has an idea of how I can remove the "KCS - " from the search results without breaking the rest of the code, I would be very grateful. Thanks for your time and thoughts.
Edit: I've posted the browser output as opposed to using screenshots.
Pre-Removal:
`
KCS - Documents: Adding New Files and Folders
<span class="search-result-votes">-1</span>
<div class="search-result-meta">by <a target="_zendesk_lotus" href="/access/return_to?return_to=https://clio1440180657.zendesk.com/agent/users/1229273507/tickets">Name Changed</a> <time datetime="2015-08-26T15:51:48Z" title="2015-08-26 07:51" data-datetime="relative">2 years ago</time> in Working with Clovis Documents > Working with Clovis Documents</div>
<div class="search-result-description">Creating a <em>New</em> Folder You can add a standalone folder from the "All <em>Files</em>" list or from within any other <em>document</em>...</div>
</li> `
Post-Removal
`
Documents: Adding New Files and Folders
-1
by *name changed* 2 years ago in Working with Clovis Documents > Working with Clovis Documents
Creating a New Folder You can add a standalone folder from the "All Files" list or from within any other document...
</li>
`
You are using the text() function on the entire HTML element, which destroys your html tags and converts the entire <div> to a string value.
Instead, target the <a> element inside the <li> like so:
$('li').addClass('search-result').find('a:first-child').each(function() {
var text = $(this).text();
$(this).text(text.replace('KCS - ',''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
KCS - This is a Search Result Item
<div>Result content...</div>
</li>
<li>
KCS - This is a Search Result Item
<div>Result content...</div>
</li>
<li>
KCS - This is a Search Result Item
<div>Result content...</div>
</li>
</ul>
Note: If you are confident that the <a>element (the link) is always the first child of the <li>, I suggest keeping this as-is, using the :first-child pseudo class.
I want to get the span tag which has the particular attribute value.
This is my html
<ul class="dropdown-menu" id="languagelist">
<li ng-repeat="(id, langName) in items" ng-click="switchLanguage(id,langName,$event)">
<span class="glyphicon glyphicon-ok" langAttr={{langName}}> </span>
<a>{{langName}}</a>
</li>
</ul>
In my JS file i have $scope.language which has the preferred language.
$scope.language might be "English", "Spanish","Japanese","French".
Now in my javascript, I need to get the span tag which has the langAttr(Atrribute) which equals to my $scope.language.
How can i use jquery to get the span tag whose attribute value is equal to the $scope.language
I can get all the span tags like this $("#languagelist span")
How can i filter or find the span tag which has the required attribute ?
If anyone knows any simple way, please do help. Thanks in advance.
This question already has answers here:
<h1>, <h2>, <h3>... tags, inline within paragraphs (<p>)
(6 answers)
Closed 6 years ago.
If i have a p element
<p> simple text <h3> this is h3 text </h3> </p>
And i do this.
alert($('p').html());
It should give output simple text <h3> this is h3 text</h3>
But it alerts only simple text. I thought Ok may be .html() does not output html tags
But when i add any html using jquery in same p element , And then alert in same way it gives me result which is expected(it shows html tags as well) .
This is example
https://jsfiddle.net/04f1drby/
Can someone explain why this different behaviour ? Thanks in advance
If you go into chrome inspector for the JS fiddle page you linked you'll notice the HTML gets rendered as this:
<p id="firstp">
simple text</p><h3>
this is h3 text
</h3>
<p></p>
A closing paragraph tag is added just before your starting header tag.