ben jay hutton ben jay hutton - 5 months ago 7x
HTML Question

How can I append search results to a div tag and then overwrite the contents on the next search?

I have tried searching for an answer but I'm not sure how one would phrase the question, so I have had no luck find it.

So please forgive me if there is an answer lying around already ^_^

I'm using XMLHttpRequest() to get JSON data from:
and displaying the results in a div tag with the id 'demo'

all works fine and the results are appended at the bottom.
However I would like for further results to overwrite the previous ones as supposed to appending it at the bottom.
I have tried using:

document.getElementById("demo").value = " ";

but sadly i havn't gotten any where. Can someone suggest something?


<!DOCTYPE html>
<title>Magic the Gathering</title>
function myFunction() {
var searching = document.getElementById("search");
var xmlhttp = new XMLHttpRequest();
if (window.location.protocol != "https:"){
var url= '' + searching.value;
var url= '' + searching.value;
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);

for (i = 0; i <; i++){
var para = document.createElement("P");
var br = document.createElement("br");
var att = document.createAttribute("id");
att.value = i;
para.setAttribute("id", i);
para.innerHTML =
"Artist: " +[i].artist + "<br />" +
"Border: " +[i].border + "<br /> "+
"Colour: " +[i].colors + "<br /> " +
"Original Text: " +[i].originalText + "<br /> " +
"Original Type: " +[i].originalType + "<br />" +
"Power: " +[i].power + "<br />";
};"GET", url, true);



<h2>Magic the Gathering</h2>

<h4>Search Magic Api</h4>
<form method="post" action="#" name="magicapi">
Search Api: <input type="text" id="search" name="search" value="">
<input type ="button" name ="mtgapi" onclick='myFunction()' value ="search mtg api">

<div id="demo"></div>



Use innerHTML instead of value:

document.getElementById("demo").innerHTML = '';