HTML how to get tag arguments - html

My English is weak so I give an example.
I want something like that
<!DOCTYPE html>
<html>
<head>
<title>MySite</title>
</head>
<body>
<div id="mydiv" testarg="teststring"></div>
<script>
var element = document.getElementById("mydiv");
var argstring = getArgument(element,"testarg");
</script>
</body>
</html>


You could use getAttribute to get an attribute's value, and setAttribute to set it (change it):
<!DOCTYPE html>
<html>
<head>
<title>MySite</title>
</head>
<body>
<div id="mydiv" testarg="teststring"></div>
<script>
var element = document.getElementById("mydiv");
var argstring = element.getAttribute('testarg');
console.log(argstring);
element.setAttribute('testarg', 'changed');
console.log(element.getAttribute('testarg'));
</script>
</body>
</html>


Your script should be,
var element = document.getElementById("mydiv");
var argstring = element.getAttribute("testarg");
Alternatively, you can use data attributes which is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM
So, your code will be like,
<div id="mydiv" data-testarg="teststring"></div>
<script>
var element = document.getElementById("mydiv");
var argstring = article.dataset.testarg;
</script>


var element = document.getElementById("mydiv");
var argstring = element.getAttribute('testarg');
console.log(argstring );
<div id="mydiv" testarg="teststring"></div>

Related

How to include an image in HTML without showing it on screen

I want to show an image on an HTML5 canvas without putting it on screen first. I've tried <noscript> but that doesn't work as then I can't include the image into my code.
Here's my HTML:
<html>
<noscript>
<img id = "tiles" src="img/tiles.png">
</noscript>
<title>Super Mario World</title>
<head>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script src="sketch.js"></script>
</body>
</html>
Here's my javascript:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var _img = document.getElementById('id1');
var newImg = new Image().src = _img;
context.drawImage(newImg,0,0);

<img id = "tiles" src="img/tiles.png" style="display:none;">
then to display it
document.getElementById("tiles").style.display = "block";
EDIT:
That was a quick answer to the question but, a far better approach would be to create a class
.hidden {
display : none;
}
then add it to elements.
<img id = "tiles" src="img/tiles.png" class="hidden">
and remove it to display
var element = document.getElementById("tiles");
element.classList.remove("hidden");
The reasoning behind this is that if the original display wasn't block, this would create issues, also it is generally discouraged to use inline style.

How to get hyperlink inside iframe

Lets say this is index.html
<html>
...
<iframe id="targetid" src="link.com"><iframe>
...
</html>
and this is link.com
<html>
...
<div class="name" href="http://I_need_this.com">blablbalba<div>
I want to get "http://I_need_this.com"

You can use the methods below:
var div = document.GetElementByClass("name");
var link = div.href;
Or:
var iframe = document.GetElementById("targetid");
var link = iframe.src;

Polymer 1.0 - injectBoundHTML() alternative

What's the Polymer 1.0 equivalent to injectBoundHTML()?
(i.e. appending HTML strings to nodes within a Polymer element and having data bindings resolve)
A JSbin example - http://jsbin.com/jufase/edit?html,output
EDIT: don't have enough SO cred to accept my own answer yet, but it should be down below somewhere. TL;DR - use "dom-bind" templates

Although as techknowledgey pointed out it's not really supported well yet. The following seems to do the trick.
function injectBoundHTML(html, element) {
var template = document.createElement('template', 'dom-bind');
var doc = template.content.ownerDocument;
var div = doc.createElement('div');
div.innerHTML = html;
template.content.appendChild(div);
while (element.firstChild) {
element.removeChild(element.firstChild);
}
element.appendChild(Polymer.Base.instanceTemplate(template));
}
If your HTML was already parsed then use something like "doc.importNode(sourceNode, true);" instead of getting/setting innerHTML.

Looks like this is not really a supported feature yet, looking at the comments from #kevinpschaaf:
https://github.com/Polymer/polymer/issues/1778
Using dom-bind, I should be able to satisfy my use case, e.g. http://jsbin.com/caxelo/edit?html,output

Bindings are to properties by default, and hyphens can be used to denote capitalizations:
<element inner-h-t-m-l="{{prop}}"></element>

Thanks guys for the prototype that I updated for my own needs : Generate markup in polymer, as dom-repeat was unable to perform this operation.
Tags for search engines :
Polymer Generation dynamically dynamic markup custom element dom-repeat dom repeat balise dynamique dynamiquement
http://jsbin.com/wiziyeteco/edit?html,output
<!doctype html>
<html>
<head>
<title>polymer</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<link rel="import" href="http://polygit.org/components/paper-button/paper-button.html">
</head>
<body>
<dom-module id="x-test">
<template>
<div id="container"></div>
</template>
</dom-module>
<script>
Polymer({
is: 'x-test',
ready: function() {
// Declare custom elements
var customElements = [
{name:'paper-button', title:'A'},
{name:'paper-button', title:'B'},
{name:'paper-button', title:'C'},
{name:'paper-button', title:'D'},
];
// Declare auto-binding, as we are at the root HTML document
var domBind = document.createElement('template', 'dom-bind');
domBind.customElements = customElements;
var domBindDocument = domBind.content.ownerDocument;
// Declare custom elements
for (var i in domBind.customElements) {
var item = domBind.customElements[i];
var elem = domBindDocument.createElement(item.name);
elem.setAttribute('raised', 1);
elem.innerHTML = item.title;
domBind.content.appendChild(elem);
}
// Append to #container
this.$.container.appendChild(domBind);
}
});
</script>
<x-test></x-test>
</body>
</html>

Change HTML <head> content using javascript/jquery

let's assume that the content is empty as given below.
<head>
</head>
If I want to change it dynamically to
<head>
<script src="jquery-1.8.0.min.js"></script>
</head>
is there anyway that AppInventor can do that?

You can select it and add to it as normal:
$('head').append('</script>');
JavaScript:
document.getElementsByTagName('head')[0].appendChild( ... );
Make DOM element like so:
script=document.createElement('</script>');
script.src='src';
document.getElementsByTagName('head')[0].appendChild(script);

Some simple javascript to change the innerHtml of document.head will work
document.head.innerHTML = "<script src=\"jquery-1.8.0.min.js\"></script>";

How about:
var HeadScript = document.createElement("SCRIPT")
HeadScript.src = "jquery-1.8.0.min.js"
document.head.appendChild(HeadScript)

Google Chrome Changes elements to lowercase

I have a HTML file like this:
<html>
<head>
<title>Test</title>
<script language="javascript">
function removeElements() {
alert( document.getElementById("FileArea").innerHTML );
var RemoveElms = document.getElementsByTagName("p");
for (i = 0; i < RemoveElms.length; ++i) {
var newelm = document.createElement("SubScript");
newelm.innerHTML = "1";
RemoveElms[i].parentNode.insertBefore(newelm, RemoveElms[i]);
}
alert( document.getElementById("FileArea").innerHTML );
}
</script>
</head>
<body id="BodyID">
<h2>Test</h2>
<input type="button" value="Remove elements" onmousedown="removeElements(); return false" unselectable="on">
<div id="FileArea"><p>Here is a test</p></div>
</body>
I am trying to add an element <SuperScript>. In the alert all the characters of this element changed into lowercase <superscript>. Can I control this? This is mainly happening in Chrome.

Chrome parses all elements and adds them to the document in an uniform way. This also happens with newlines and such.
See this: Case conventions on element names?