Develop Reference

How to use placeholder element from Semantic-UI?

I want to use the Placeholder element
<div class="ui placeholder">
<div class="image"></div>
</div>
But I can't figure out if I have to replace manually the content on it or there's a function out-of-the-box.
I have read the documentation but I haven't found anything for that.

No, there's no function out-of-the-box - you'd have to manually replace the contents of the placeholder elements, removing the placeholder class as you go.

I want to getText from html source code

HTML:-
<div class="row">
<div id="tl-detail-container-left" class="col-md-6">
<div class="section-title">ETL Details</div>
<ul class="info-display-cell-ltl entity-item">
<li>
<span class="vline"></span>
<div class="entity-value" title="darsht">Name: darsht</div>
</li>
What I have done:
WebElement path=driver.findElement(By.xpath("//form/div[2]/div[1]/div[6]/div[1]/ul/li[1]");
String str= path.findElement(By.cssSelector("div[class='entity-value']")). get Text();
System.out.println(str);
Please help me with the code to get dynamic Text
(ex: Omarjiti) from html.

In Java, use the jsoup library.

your xpath should be optimized.
Other thing you are perfoming findElement two times. Once you done with findElement then just use it's property.
WebElement webelement=driver.findElement(By.xpath("//*[#class='vline']/div");
String str= webelement.getText();
Refer this for detailed on xpath.

JQuery find text nodes with not selector on nested elements work only with .contents() and filter()

Please help me understand why this is happening.
(UPDATE) TL;DR:
nested elements' text will be included when using find with not(NESTED_ELEMENT) selector but will be excluded when using find with not(NESTEDT_ELEMENT)+contents+filter(TEXT_NODE).
I want to get the text from a page but to exclude some elements.
For the simplicity, I have excluded <p> element only (and descendants) but when I use the text(), I'm also getting the text in the excluded element.
When I filter the results with contents() to include only text nodes, only then the not selector is "working" by not returning the text from the excluded elements. Please see image below with the code used:
Why isn't it working without using contents()?
Thanks.
For your convenience:
The URL that I tested on is this one.
The code that gives me the excluded element's text:
$('body').find(':not(p, p *)').text()
The code that gives me the desired text (excluded element's text not present):
$('body').find(':not(p, p *)').contents().filter(function(){return this.nodeType == 3}).text()
And here's the HTML part from the URL. As you can see, there's a <p> element there and As described, I want to get the text from this HTML but to exclude some elements (p was selected for simplicity, there will be lots more rules in production).
<div class="col-lg-12">
<header id="header" role="banner" class="jumbotron">
<h1>
<img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" alt="">
<i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
<span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
</h1>
<p class="lead" id="lead_content">The more you understand the specification, the more you'll realize there are more right
ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
</header>
</div>

Try using .clone() , .remove() , .text()
var filtered = $(".col-lg-12").clone();
filtered.find("p").remove();
console.log(filtered.text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="col-lg-12">
<header id="header" role="banner" class="jumbotron">
<h1>
<img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" alt="">
<i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
<span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
</h1>
<p class="lead" id="lead_content">The more you understand the specification, the more you'll realize there are more right ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
</header>
</div>

How to get all the child elements of parent div

I want to copy all the child elements of parent div into the text box using jquery.
I tried to find the solution over stackoverflow and google, but did not find any solution. Please help, i will be very greatful. Thanks in advance
<div id="hello">
<div class="sub1">Hello how are you</div>
<div class="sub2">Hello how are you</div>
<div class="sub3">Hello how are you</div>
</div>
</div>
I want to copy all the children elements in the text
The output should come like this:
<input type="hidden" value="<div class="sub1">Hello how are you</div><div class="sub2">Hello how are you</div><div class="sub3">Hello how are you</div></div>" id="textbox">

use html() to get the all the dom and text value
$("#textbox").val($("#hello").html());

Try this
alert($("#hello").html())
$('input:hidden').val($("#hello").html())

to achieve this you can do as below:
var values=$('#hello').html();
$('#textbox').val(values); // textbox is the id of hidden field you specified

How to traverse the DOM to get to specific element

I'm having a brain freeze trying to remember what the best way is to access the data attribute on an anchor tag when clicking a button that's not inside the tags container, could someone assist me on how I would do this, so if I click .js-watchlist-add I want to get the data-id of .js-film-entry:
JS
<div class="ctn">
<a href="/movie/{{id}}" class="film-entry js-film-entry" data-id="{{id}}">
<img src="{{poster}}" class="film-img">
<div class="result-film-details">
<h2 class="film-title">{{title}}</h2>
<p class="film-release-date">Released {{releaseYear}}</p>
<ul class="result-stats-tabs clearfix">
<li>{{vote_average}} <span>Vote Average</span></li>
<li>{{vote_count}} <span>Vote Count</span></li>
</ul>
</div>
</a>
<div class="cta-ctn">
<button class="watchlist-add js-watchlist-add">Add to watchlist</button>
<button class="watchlist-remove js-watchlist-remove">Remove from watchlist</button>
</div>
</div>

You can use closest() to get the parent element and find() to get the descendant within parent.
Live Demo
$(this).closest('.ctn').find('.js-film-entry').data('id');

You can use jQuery's has and find methods.
$('.ctn').has(this).find('.js-film-entry')

Adil's answer is great,
Though it may be more efficient to use children versus find, to avoid traversing descendants.
$(this).closest('.ctn').children('.js-film-entry').data('id');
Just to give another DOM traversal example, you could also use:
$(this).parent().siblings('.js-film-entry').data('id');