Develop Reference

OneNote JavaScript API access element

I have tried to create my first One Note Add In using the JavaScript API. I have tried the example in the MS documentaion (Build your first OneNote task pane add-in). This one works.
Now I want to try to change the formatting of an element in the document. For example I want to change the font colour of a text. However, I have not yet found a way to access the elements in a document.
Can I access elements in a document via a JS Add In to change their "style" property?
How can I do that?
Thanks
Micheal

Finally, I found a way to access the OneNote page content from the JS Add In. You can load the page content using
var page = context.application.getActivePage();
var pageContents = page.contents;
context.load(pageContents);
Now you have access to the page content in the qued commands.
return context.sync().then( function() {
var outline = pageContents.items[0].outline;
outline.appendHtml("<p>new paragraph</p>");
var p = outline.paragraphs;
context.load(p);
...
});
So consequently you can access element by element in document the hirarchy.

understanding Jquery inside HTML

I am writing this code here inside my HTML and I am trying to access the information in order to show and hide the information on the functioning website.
I have only been learning to code for less than a month and a half so I am unsure of whether or not this code creates another DIV inside the HTML.
If it does, how can I access this on CSS? I tried different methods to see if this would show up, but at this point, I believe it does not create anything new inside my HTML Body.
*var $tweet = $('<div class="tweet' +tweet.user+'"></div>');

you are creating an element but you are not appending it to anything.
var tweet = ('<div class="tweet' +tweet.user +'"></div>');
$('body').append(tweet);
you can change the 'body' to a different selector

Make HTML visible inside Iframe

I'm making my own WYSIWYG. I've got two buttons: "Visualize" and Show Source.
I've got an iframe (rich text editor) that contains a huge piece of HTML code. First time it's loaded it shows all the elements visually. Once Show Source is pressed the innerHTML text (of the visualized html) is shown. But how can I make the HTML text visual again, when the Visualize button is pressed?
content.document.body.innerText holds the HTML that needs to be visualized.
(content = id of the iframe)
$('#Visualize').click(function()
{
// Make HTML visible
});

With the html code that you already have you and to show a preview in a div, correct? Just use the html function.
$('#Visualize').click(function(){
$('#myShowDiv').html(content.document.body.innerText);
});

If you're using an iframe and that iframe is only intended to hold the actual page source being edited, then you're going to need variables on your parent frame that hold the actual source. I would recommend keeping it separate and then use the following to perform switches:
var actualSource = content.document.body.innerHTML;
// just something to initialize it
// You should probably keep it in a global object instead of as a var
$('#Visualize').click(function()
{
actualSource = content.document.body.innerText;
content.document.body.innerHTML = "";
content.document.body.innerHTML= actualSource;
});
I would imagine that you have methods that are capturing the source, but I would imagine you'd want to capture the actual source as it is at that moment. I'm not sure what you're doing with the actual editing piece (is it a div that is editable? is it a text area?), but in order to perform the showing, it should just be a matter of toggling the innerHTML and innerText between the two settings. The real catch will be monitoring the actual controls affected by this change.

Dynamically generating iframes causing previously generated iframes to refresh unwontedly - when using innerHTML

Thanks in advance for any help.
I am posting form values to multiple dynamically generated iframes, and want the content of each iframe to remain, as I post to another dynamically generated iframe.
As you can see by my example - even just dynamically creating and adding a new iframe via innerHTML +=, causes the previously generated iframes to refresh.
This is not the case if I do not use javascript to create the iframes - if I just write the html ahead of time and post to the already existing iframes, there is not any refresh problem. The previously posted iframes will remain with the posted content.
I do not know how many iframes I will need - so that is why I am using javascript to dynamically generate the iframes.
I am aware that I could use AJAX for this same purpose, but I am not using AJAX for this.
I just need to know why the iframes are refreshing, regardless of there content, when I am dynamically adding another iframe via Javascript and innerHTML?
Is there a way to achieve this without the iframes refreshing?
With my example - I am only showing that the iframes are refreshing. I am not posting to them. But the problem shows up the same.
Click the "Add Iframe" button, up to 3 times. note the previous iframe(s) refreshing as the new one is added.
Here is my example code of this problem.
Thanks again.
<script type="text/javascript">
var Content_For_Iframe_Array = new Array("http://www.bing.com", "http://www.wordpress.com/", "http://www.webcrawler.com");
var Inc_iFrame_Num = 0;
function add_iframe_with_content(){
if(Inc_iFrame_Num < 3){
var iFrame_String ="<iframe frameborder='5' src='"+Content_For_Iframe_Array[Inc_iFrame_Num]+"' scrolling ='yes' id='iFrame_"+Inc_iFrame_Num+"' style='height:300px; width:800px; margin:5px; padding:0px;'></iframe>";
document.getElementById('iFrame_Container').innerHTML += iFrame_String;
Inc_iFrame_Num++;
}
}
</script>
<div style="cursor:pointer; background-color:#CCC; border:thin #7777 solid; width:85px; margin-top:40px; margin-bottom:14px;" onclick="add_iframe_with_content();">Add Iframe</div>
<div id="iFrame_Container" style="height:300px; width:800px; border:#CCC thin solid;">Div to hold Iframes</div>

Since you solved it, here is why it happened. The iframes technically didn't refresh, they were destroyed and then recreated.
When you set innerHTML, you remove all the existing nodes inside an element, and then generate new nodes based on the HTML snippet you inserted. Try the following experiment.
<div id="el"><button>My Button</button></div>
<script>
var myElement = document.getElementById('el');
var button = myElement.firstChild;
myElement.innerHTML = myElement.innerHTML;
console.log(button);
console.log(myElement.firstChild);
console.log(button == myElement.firstChild);
console.log(button.parentNode);
</script>
Here, you see we have a <div> holding a <button>. We store the button as a variable and then "reload" the inner HTML. In the first two lines of the log the elements look the same, but they are actually two different nodes. This is evidenced by the fact that line 3 returns false, showing they are different and line 4 shows that button doesn't have a parent node. It is just sitting in memory because we have a reference to it.
As you discovered, the non-destructive way to change an element's children is with DOM methods. You can use appendChild to add an element at the end or insertBefore to insert a child at a different position. Newer browsers support a method called insertAdjacentHTML which does what you were originally planning, create HTML from a string and non-destructively insert it at the end of a node. I don't think support is quite there yet, though, and the other DOM methods are much more well understood.

I think I found the answer.
The proper method is to use createElement() and appendChild(). (See code below)
But I would still love to know why the innerHTML method refreshes the other iframes?
Here is the correct usage for my example:
// PROPER METHOD to place the new iframe
var iframe = document.createElement('iframe');
iframe.frameBorder = 5;
iframe.scrolling ='yes';
iframe.height = "300px";
iframe.width = "800px";
iframe.name = "iFrame_"+Inc_iFrame_Num;
document.getElementById("iFrame_Container").appendChild(iframe);
//

how to create span element in web page contained in an iframe

I have a scenario where a javascript function creates a new span element in web page present in main window of browser--
Code for this is given below--
document.createElement('span');
Now I want to extend this code to make it work in an iframe as well... I have figured out that for this to happen, the above code should be modified so that the span element is created within the iframe. I have with me the id/name of the iframe in which the span element has to be created... How do I create the span element in iframe?
I understand that the web page in iframe should belong to same domain as page contained in main window(viz Same Origin Policy)...

if i get u right u need to add an element in a page in iframe
use this code
var ifrm= document.getElementById('iframe id');
var ifrmdocument = ifrm.contentWindow.document;
var spn=ifrmdocument.createElement('span');
spn.innerHTML='Hello';
ifrmdocument.appendChild(spn);
Regards
Any Questions iam here
if my answer is useful please mark it as correct one