I'm trying to add a new paragraph to a document using document.createElement. It's not working for me.
HTML file:
<section class="first">
<h2>Properties Tutorial</h2>
<p>No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an ideal and if they can't stop you then you become something
else entirely. Legend, Mr Wayne.</p>
<h2 class="second-heading">I am the DOM</h2>
<p>You know what you said about the structures becoming shackles. You were right and I can't take it, the injustice. I mean, no one ever's gonna know who saved the entire city.</p>
<img class="custom-img" src="" alt="Kitty image" />
</section>
JS file:
const newP = document.createElement('p');
.first.appendChild('newP');
newP.textContent = 'Say my name!';
console.log(newP);
I expect for the element to be created with document.createElement, text to be added with element.textContent and for the element to be added to the children of the section with class of "first" through the appendChild method.
From the snippet you post, you mistyped:
.first.appendChild('newP');
It should have been:
document.getElementsByClassName('first')[0].appendChild(newP)
Try this:
const newP = document.createElement('p');
newP.innerHTML = 'Say my name!'
document.getElementsByClassName('first')[0].appendChild(newP);
<section id="first" class="first">
<h2>Properties Tutorial</h2>
<p>No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an ideal and if they can't stop you then you become something
else entirely. Legend, Mr Wayne.</p>
<h2 class="second-heading">I am the DOM</h2>
<p>You know what you said about the structures becoming shackles. You were right and I can't take it, the injustice. I mean, no one ever's gonna know who saved the entire city.</p>
<img class="custom-img" src="" alt="Kitty image" />
</section>
you can try below code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<section class="first">
<h2>Properties Tutorial</h2>
<p>No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an ideal and if they can't stop you then you become somethingelse entirely. Legend, Mr Wayne.</p>
<h2 class="second-heading">I am the DOM</h2>
<p>You know what you said about the structures becoming shackles. You were right and I can't take it, the injustice. I mean, no one ever's gonna know who saved the entire city.</p>
<img class="custom-img" src="" alt="Kitty image" />
</section>
<button id="add">Add Paragraph</button>
<script type="text/javascript">
var first = document.getElementsByClassName('first')[0],
add = document.getElementById('add');
add.onclick = function(){
var p = document.createElement('p');
p.textContent = "Say my name!";
first.appendChild(p);
}
</script>
</body>
</html>
The button will produce tag p inside class first with appendChild method.
Related
It is simple example HTML for demonstration my issue
<!DOCTYPE html>
<html>
<body>
<div>
<label>This value comes from internal</label>
<div>
<div name='internal'>$11.11</div>
</div>
<div>
<label>This value comes from external</label>
<div>
<input type ='text' name='internal' readonly='true'>
</div>
</div>
</body>
</html>
//Display in Web Browser
This value comes from internal
11.11
This value comes from external
55.55
I want to get $55.55, but I searched "//*[text()='$55.55']" with inspector but I could not find any $55.55
and I figured out this $55.55 value comes from external JS and changed DOM and display.
This value displayed on browser but I could not get Xpath of input value
How can I get Xpath get this value "$55.55"
Thank you
Well, I dont know if I correctly understand your question, but if your goal is to get the input's value you can do something easy as, without the need of XPath:
var myInputValue = document.querySelector('input[name=internal]').value;
console.log(myInputValue);
Firefox 38.0.5 added a "Reader View" to the address bar:
But not all sites get this icon, It only appears when readable content page is detected. So how do I enable this for my site?
I tried media print and an extra stylesheet for print-view, but that has no effect:
<html>
<head>
<style>
#media print { /* no effect: */
.no-print { display:none; }
}
</style>
<!-- no effect either:
<link rel="stylesheet" href="print.css" media="print"><!-- -->
</head><body>
<h1>Some Title</h1>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
<br><br><br>This is the only text
</body></html>
What code snippets do I have to add into my website sourcecode so this book icon will become visible to the visitors of my site?
As the code stands in May '20 the trigger function (isProbablyReaderable) scores only p or pre elements and div elements that contain at least one decedent br.
A slight oversimplification of the scoring heuristic is:
For each element in ['p', 'pre', 'div > br']:
If textContent length is > 140 chars, increase score by sqrt(length - 140)
if cumulative score > 20, return true
You have to add <div> or <p> tags to achieve a page to iniciate the ReaderView.
I created a simple html that works:
<html>
<head>
<title>Reader View shows only the browser in reader view</title>
</head>
<body>
Everything outside the main div tag vanishes in Reader View<br>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
<div>
<h1>H1 tags outside ot a p tag are hidden in reader view</h1>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+is resized+in+print+view">
<p>
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789 123456
</p>
</div>
</body>
</html>
This is the minimum needed to activate it. This is a somewhat multi-faceted process where scores are added for text chunks.
You can for example activate the reader view in forum's software if you add a <p>-tag around each message block in the view-posts template.
Here are some more details about the mechanism
Magento ver. 1.13
I'm trying to edit the code and layout of an existing Magento website.
From asking a question yesterday i had learned that when first landing on the website you are directed to the page tagged with the "home" URL key and you can find the pages by looking in the "CMS->Pages->Manage Content"
I then looked at what the page with the URL key "home" contains..
<div>{{block type="dip/dip" name="dip" template="dip/banner-home.phtml" }}</div>
<div class="content-home">
<div class="tab-text">{{block type="core/template" name="tabs_home" as="tabs_home" template="page/tabs.phtml"}}</div>
</div>
so i looked at the first line and decided that it was loading the banner that is at the top of the website.
I then looked at the third line that is loading a block from the template aswell and it appears to be loading the file tabs.phtml..
I then located the tabs.phtml hoping that the entire layout of the page would be located there, but i didn't find anything that seems of any use in there.
this is what the page contained..
<SCRIPT type="text/javascript" src="<?php echo $this->getSkinUrl('js/carousel.js') ;?>"></SCRIPT>
<div class="tabs">
<ul class="veiw-all-tab" id="navigation-links">
<li><a href="javascript:void(0);" class="slide-arrow-lft" ><img src="<?php echo $this->getSkinUrl()?>images/slide-left.gif" alt="" /></a></li>
<li>
<span id="newallproductspan"><img src="<?php echo $this->getSkinUrl()?>images/view-all-products.gif" alt="" /></span>
<span id="featuredallproductspan"><img src="<?php echo $this->getSkinUrl()?>images/View-All-Featured-Products.gif" alt="" /></span>
</li>
<li><a href="javascript:void(0);" class="slide-arrow-rgt" ><img src="<?php echo $this->getSkinUrl()?>images/slide-right.gif" alt="" /></a></li>
</ul>
<div class="product-details-new-tab-content">
<ul class="product-details-new-tabs-horiz">
<li id="product_new_products" class="selected"><span><?php echo $this->__('New Products'); ?></span></li>
<li id="product_feature_products"><a href="javascript:void(0)" ><span><?php echo $this->__('Featured Products'); ?></span></a></li>
</ul>
</div>
</div>
<?php echo Mage::getBlockSingleton('catalog/product_new')->setTemplate('catalog/product/new.phtml')->toHtml(); ?>
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('featured_block')->toHtml(); ?>
<script type="text/javascript">
var show_selector = new Array();
show_selector[0] = true
show_selector[1] = true;
//show_selector[2] = true;
function showNewProductGallery(counter){
selector = ".infiniteCarousel"+counter;
if(show_selector[counter])
{
jQuery(selector+" .jCarouselLite").jCarouselLite({
btnNext: "#navigation-links .slide-arrow-rgt",
btnPrev: "#navigation-links .slide-arrow-lft",
speed: 500,
easing: "easeinout"
});
show_selector[counter] = false;
}
};
</script>
<script type="text/javascript">
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self=this;
$$(selector+' a').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('selected')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
var counter = 0;
ul.getElementsBySelector('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
if (el==li) {
el.addClassName('selected');
// Added by Zeon
if (el.id == 'product_new_products') {
$('newallproductspan').show();
$('featuredallproductspan').hide();
}
if (el.id == 'product_feature_products') {
$('featuredallproductspan').show();
$('newallproductspan').hide();
}
// End
contents.show();
showNewProductGallery(counter);
} else {
el.removeClassName('selected');
contents.hide();
}
counter++
});
}
}
new Varien.Tabs('.product-details-new-tabs-horiz');
</script>
I'm starting to run out of leads to follow to find out how to actually change anything about this page at all.. i can't seem to find anything.. I'm starting to wonde if its even possible.
Any and all help is appreciated.. even if you don't know the answer.. even if you just have a few tips for me, that would be great!
Your question is extremely broad, but I'll try to get you started.
A page in Magento is made up of blocks pulled together using Magento's Layout XML and then rendered by a combination of block objects and php templates (phtml). Describing all of how that feature works is a bit beyond the scope of a simple Q&A, but there are some good guides out there.
I'm not going to talk much about Enterprise because it's not FOSS, but I will say that the default theme is "enterprise", which means that you want to look in app/design/frontend/enterprise/default/layout/page.xml for a fairly global example of layout xml. You can see here that layout xml consists of handles which contain blocks, references and removes, which can contain actions or recur to blocks.
A block in layout xml corresponds to a block class in php, which can be identified by its type. Block type names are fully resolved to their block classpaths in Mage_Core_Model_Layout*.
An action in layout xml calls a method on the containing block. Its children are arguments (the xml node names are ignored for immediate children, but are array keys for grandchildren of the action node.)
A remove lets you ignore an existing block.
A reference allows you to update an existing block by firing off one of its actions or by attaching or removing child blocks.
If you just want to tweak layout, you can do that by dropping a local.xml file in the current theme package. That's a good way to get some practice with layout xml without a lot of the headaches of massive theming. If you want to create your own theme with extensive changes, read the Designer's Guide.
The documentation on source binding has an aside which states:
Important: A single root element should be used in the template when
binding to an array. Having two first level DOM elements will result
in an erratic behavior.
However, I'm finding that this is the case even for non arrays.
I have the following HTML, which sets up two div's populated by two templates. The only difference is that the working template wraps that databound spans in a div.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<title>JS Bin</title>
<script id="broken-template" type="text/x-kendo-template">
Foo: <span data-bind="text: foo"></span><br/>
Foo Again: <span data-bind="text: foo"></span>
</script>
<script id="working-template" type="text/x-kendo-template">
<div>
Foo: <span data-bind="text: foo"></span><br/>
Foo Again: <span data-bind="text: foo"></span>
</div>
</script>
</head>
<body>
<div id="broken-div" data-template="broken-template" data-bind="source: this">
</div>
<br/>
<br/>
<div id="working-div" data-template="working-template" data-bind="source: this">
</div>
</body>
</html>
And the JavaScript simply creates a view model with a single property and binds it to both divs:
var viewModel = kendo.observable({foo: "bar"});
kendo.bind($("#broken-div"), viewModel);
kendo.bind($("#working-div"), viewModel);
In both cases, only the first root element and it's children are being bound properly. This suggests that every time I databind to template with more than one element I need to make sure it is wrapped in a single root.
Is this behavior documented somewhere? Is there a bug in Kendo or in my sample code? An explanation for why Kendo requires a single root would be great to hear as well.
(Sample code as a jsfiddle)
It's not documented except in the one place you mentioned. Such is the state of Kendo UI documentation - it's less than complete. I've been using Kendo UI for three years and as far as I can tell you, this is its default behavior and not a bug. Unfortunately, it's one of the many quirks you simply learn (stumble upon) from experience.
i'm learning it, but i cant find what's wrong in this!
i want the div2 to get data from the form in div1, called formulario.
i would like to know which item is selected and which button was clicked.
main html file:
<script src="utils/Scripts/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function sendf(formul, divi, php)
{
var params = Form.serialize($(formul));
new Ajax.Updater(divi, php, {method: 'post', parameters: params, asynchronous:true});
}
</script>
</head>
<body>
<div id="div1">
contenido div1
<form id="formulario" method="POST">
<select size="3" id="lista" onchange="sendf('formulario', 'div2', 'prodiv1.php');">
<option>elemento 1</option>
<option>elemento 2</option>
<option>elemento 3</option>
</select>
<input type="button" id="b1" value="bot1" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
<input type="button" id="b2" value="bot2" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
</form>
<div id="div2" style="background: blue;">
contenido div2
</div>
</div>
</body>
</html>
the php file, prodiv1.php:
<?
echo 'exec: prodiv1.php<br>';
print_r($_POST);
echo serialize($_POST);
if (isset($_POST))
{
foreach ($_POST as $key=>$value)
{
echo $key.'=>'.$value."<br>";
}
}
echo "select: ".$_POST['lista'];
if (isset($_POST['b1'])) {echo 'click: boton1';} else {echo 'click: boton2';}
?>
i've tried a lot of things, and seen that it could be done with event observers, httprequests and such, but what i need is quite easy, and probably there's an elegant way to solve it...
i thank in advance any help!
have a nice day.
guillem
if you dont need to actually process the form contents in some way then you have no need to use Ajax to pass to a PHP script. Depending on what exactly you wanted to display in div 2 you could do something as simple as this:
function sendf()
{
var listvar = $('lista').value;
$('div2').update('select menu value was ' + listvar);
}
This is obviously missing quite a lot of detail and can be massively improved but it should highlight the fact that AJAX is not required.
Edit Looking at the rest of the code you have posted, is AJAX really required for this? surely you are just updating the existing page with data already present on the page, the server has no real part to play in this?
Sorry to dive into jQuery again, but this should allow you to get the values into "div2" without an ajax request.
$(document).ready(function() {
$("input").click(function(e) {
$("#div2").html($(this).attr("id")+" clicked<br />");
updateList();
});
});
function updateList() {
$("#div2").append($("#lista").val() + " selected");
}
In plain English this code says "if an input element is clicked, update the value of div2 with the input variables id, and append the selected value from the list to the result". Hopefully that makes sense to you :)
If you need an easy, elegant way to solve this with AJAX, use the jQuery library's ajax and post methods. For more information take a look here, it will significantly cut down on the size and complexity of your code.