Вывод измененного текстаContent

У меня есть строка svg, и я вношу в нее некоторые изменения. Я выводил svg как текст в targetDiv.Вывод измененного текстаContent

<html lang="en"> 
    <head> 
    <title>Output Modified</title> 
    </head> 
    <body> 
    <div id="targetDiv"></div> 
    <script> 
     var viewText = '<svg width="400" height="100"><rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /></svg>'; 

     var rect = document.getElementsByTagName("rect"); 
     for (var i = 0; i < rect.length; i++) { 
      //do modifications to rect (e.g. height="200") 
     } 

     document.getElementById('targetDiv').textContent = viewText; 
    </script> 
    </body> 
    </html>

В настоящий момент выход такой же, как и viewText. Мой вопрос в том, как я могу вывести модифицированный svg MARKUP?

источник

2015-09-03 Bekki

Используйте 'innerHTML' вместо' textContent' – Tushar

@Tushar Спасибо. Я сделал 'document.getElementById ('targetDiv'). InnerHTML = viewText;', но страница пустая (в браузере текст не отображается). – Bekki

Добавьте свой полный код в вопрос, я думаю, вы включили 'script' в' ' – Tushar

Вы можете использовать временный элемент для изменения содержимого

var viewText = '<svg width="400" height="100"><rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /></svg>'; 
 
var tmp = document.createElement('div'); 
 
tmp.innerHTML = viewText; 
 

 
var rect = tmp.getElementsByTagName("rect"); 
 
for (var i = 0; i < rect.length; i++) { 
 
    rect[i].style.height = '200px' 
 
} 
 

 
document.getElementById('targetDiv').innerText = tmp.innerHTML;

<div id="targetDiv"></div>

источник

2015-09-03 04:40:15

http://jsfiddle.net/arunpjohny/9rv5x1u3/ –

Спасибо. :) Но я не вижу разметки на странице. Он пуст. Я что-то упускаю? Я хочу, чтобы страница отображала измененную разметку svg. (например: ' Bekki

@Bekki Я добавил стиль 'height' ..поэтому 'stroke: rgb (0, 0, 0); height: 200px; ">' –

<html lang="en"> 
<head> 
    <title>Output Modified</title> 
</head> 

<body> 
    <div id="targetDiv"></div><script> 
     var viewText = '<svg width="400" height="100"><rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /><\/svg>'; 
      document.getElementById('targetDiv').innerHTML= viewText; 
      var rect = document.getElementsByTagName("rect"); 
      for (var i = 0; i < rect.length; i++) { 
       //do modifications to rect (e.g. height="200") 
      } 

    </script> 
</body> 
</html>

Установите innerHTML перед вызовом getElementsByTagName("rect")

источник

2015-09-03 04:22:32 Flake

Спасибо. Мне нужно вывести модифицированный svg MARKUP вместо изображения. – Bekki

Если вы можете использовать JQuery (как видно по тегу) это было бы намного проще:

<html lang="en">  
    <head> 
     <title>Output Modified</title> 
     <script> 
      var viewText = '<svg width="400" height="100"><rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /></svg>'; 
      $('#targetDiv').html(viewText); 

      var rect = $('rect'); 
      for (var i = 0; i < rect.length; i++) { 
       //do modifications to rect (e.g. height="200") 
      } 
     </script> 
    </head>  
    <body> 
     <div id="targetDiv"></div> 
    </body> 
</html>

EDIT в соответствии с комментарием:

var viewText = '<svg width="400" height="100"><rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /></svg>'; 

var rect = $('rect'); 
var text=""; 
for (var i = 0; i < rect.length; i++) { 
    //do modifications to rect (e.g. width="200") 
    console.log(text); 
    text += 'Set width="200" <br />'; 
    //do modifications to rect (e.g. height="400") 
    text += 'Set height="400"'; 
} 
$('#targetDiv').html(text);

посмотреть this fiddle

источник

2015-09-03 04:28:16 Pindo

Спасибо. :) Мне нужно вывести модифицированный svg MARKUP вместо изображения svg. – Bekki

@Bekki, так что вы хотите вывести то, что вы делаете в цикле for внутри целевого div? например, если вы установили высоту 200, вы хотите, чтобы div задал значение высоты текста 200? – Pindo

Это именно то, что я ищу ... – Bekki

У вас есть viewText, введенный вручную как строка. Если вы хотите, чтобы иметь возможность получить HTML в SVG после внесения изменений, вы можете попробовать это:

<svg width="400" height="100" id="svg1"> 
    <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> 
</svg> 

<div id="targetDiv"></div> 

<script> 
    var rect = document.getElementsByTagName("rect"); 
    for (var i = 0; i < rect.length; i++) { 
     //do modifications to rect (e.g. height="200") 
    } 

var viewText = document.getElementById("svg1").outerHTML; 
document.getElementById("targetDiv").textContent=viewText; 
</script>

источник

2015-09-03 04:39:08

Кстати, я думаю, что другие люди не уверены, о чем вы просите, потому что они не видели ваш [последний вопрос] (http://stackoverflow.com/questions/32366251/using-document-write-to-output-markup). В этом вопросе вы не указали свой фактический код svg. –

Спасибо. Что такое 'yourCode'? – Bekki

Должно быть viewText. Ред. –

Вывод измененного текстаContent

ответ

Смежные вопросы