Javascript-форум - Преобразовать type="text" в <p/>

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Преобразовать type="text" в <p/> (https://javascript.ru/forum/misc/43668-preobrazovat-type%3D-text-v-p.html)

Преобразовать type="text" в <p/>

Есть код, который динамически добавляет текстовые поля. Нужно, чтобы после ввода данных и проверки валидации, текстовое поле преобразовывалось в <p/> или какой-то другой элемент, который выглядит на странице как label.
Код:

<script type="text/javascript">
                var idno = 2;
                function addNewElement() {
                    var mainDiv = document.getElementById('more_element_area');
                    var innerDiv = document.createElement('div');
                    innerDiv.setAttribute('id', 'divId' + idno);
                    var generatedContent = '<input type="text" name="new_element' + idno + '" id="new_element' + idno + '"value="This is my text box' + idno + '"/>&nbsp<a href ="javascript:void(0)" onclick="return removeThisElement(' + idno + ')">Remove This</a>';
                    innerDiv.innerHTML = generatedContent;
                    mainDiv.appendChild(innerDiv);
                    idno++;
                }
                function removeThisElement(idnum) {
                    var mainDiv = document.getElementById('more_element_area');
                    var innerDiv = document.getElementById('divId' + idnum);
                    mainDiv.removeChild(innerDiv);
                }
            </script>

<div id="more_element_area">
                <div>
                    <input type="text" name="new_element1" value="This is my text box 1" />
                </div>
            </div>
            <a href="javascript:void(0)" onclick="return addNewElement()">+ Add more text box</a>
        </div>

<style>
.label{
    border: none;
}
</style>
<input type="text" class="label" readonly="" value="Ну чем тебе не 'label'?" />

К сожалению этот вариант не работает.

Juli174,

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
  <script>
    window.ondblclick = function() { // по двойному клику input преобразуется в p
      var source = document.getElementById("source");
      var dest = document.createElement("p");
      dest.innerHTML = source.value;
      document.body.replaceChild(dest, source);
    }
  </script>
</head>
<body>
  <input type="text" id="source" value="la la la la la">
</body>
</html>

Цитата:

Сообщение от Juli174

К сожалению этот вариант не работает.

Почему?:cray:

Juli174,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
              var idno = 2;
                function addNewElement() {
                    var mainDiv = document.getElementById('more_element_area');
                    var innerDiv = document.createElement('div');
                    innerDiv.setAttribute('id', 'divId' + idno);
                    var generatedContent = '<input type="text" name="new_element' + idno + '" id="new_element' + idno + '"value="This is my text box' + idno + '"/>&nbsp<a href ="javascript:void(0)" onclick="return removeThisElement(' + idno + ')">Remove This<\/a>&nbsp<a href ="javascript:void(0)" onclick="return validateThisElement(' + idno + ')">Validate This<\/a>';
                    innerDiv.innerHTML = generatedContent;
                    mainDiv.appendChild(innerDiv);
                    idno++;
                }
                function removeThisElement(idnum) {
                    var mainDiv = document.getElementById('more_element_area');
                    var innerDiv = document.getElementById('divId' + idnum);
                    mainDiv.removeChild(innerDiv);
                }
                 function validateThisElement(idnum) {
                    //if validate
                    var innerInput = document.getElementById('new_element' + idnum);
                    var mainDiv = document.getElementById('more_element_area');
                    var innerDiv = document.getElementById('divId' + idnum);
                    var innerP = document.createElement('p');
                    innerP.id = 'new_element' + idnum;
                    innerP.innerHTML = innerInput.value;
                    mainDiv.replaceChild(innerP, innerDiv);

                }

  </script>
</head>

<body>
  <div id="more_element_area">
    <div>
      <input type="text" name="new_element1" value="This is my text box 1">
    </div>
  </div><a href="javascript:void(0)" onclick="return addNewElement()">+ Add more text box</a>
</body>
</html>

рони, спасибо, супер!))